二十七、使用 Flex 布局模型实现网页布局之 flex 布局(3)

主轴方向和对齐方式

使用 flex-direction 改变元素排列方式,主轴默认是水平方向,侧轴默认是垂直方向,修改主轴的方向属性 :

  • row :行,水平,默认值
  • column :列,垂直
  • row-reverse :行,从右向左
  • column-reverse :列,从下向上

flex-direction: column; 示例:

启用 flex 布局模型,修改主轴方向为 ,则侧轴自动转换为横轴

HTML 复制代码
    <style>
      .icon-xihuan {
        width: 30px;
        height: 30px;
        color: red;
      }
      .box {
        display: flex;
        flex-direction: column;
        width: 100px;
        height: 100px;
        border: 1px solid #000;
      }
    </style>

  <body>
    <div class="box">
      <span class="iconfont icon-xihuan"></span>
      <span>爱心</span>
    </div>
  </body>

先修改主轴为列,再实现盒子水平居中

主轴 修改为 之后,此时的 侧轴 就变为 横轴 了,要实现 水平居中 ,就要设置侧轴居中对齐 :

HTML 复制代码
    <style>
      .icon-xihuan {
        width: 30px;
        height: 30px;
        color: red;
      }
      .box {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100px;
        height: 100px;
        border: 1px solid #000;
      }
    </style>

先修改主轴为列,再实现盒子垂直居中

主轴 修改为 之后,要实现 垂直居中 ,就要设置主轴居中对齐,因为此时的 主轴 就是 竖轴

HTML 复制代码
    <style>
      .icon-xihuan {
        width: 30px;
        height: 30px;
        color: red;
      }
      .box {
        display: flex;
        flex-direction: column;
        justify-content: center;
        width: 100px;
        height: 100px;
        border: 1px solid #000;
      }
    </style>

结合以上两个例子,实现居中

HTML 复制代码
    <style>
      .icon-xihuan {
        width: 30px;
        height: 30px;
        color: red;
      }
      .box {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 100px;
        height: 100px;
        border: 1px solid #000;
      }
    </style>

弹性盒子换行

默认情况下,多个弹性盒子沿主轴排列,都在同一行显示, 子级尺寸默认弹性伸缩

HTML 复制代码
    <style>
      .box {
        display: flex;
        height: 200px;
        border: 1px solid #000;
      }
      .box div{
        width: 100px;
        height: 100px;
        background-color: rgb(189, 189, 247);
      }
    </style>

  <body>
    <div class="box">
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
      <div>5</div>
      <div>6</div>
      <div>7</div>
      <div>8</div>
    </div>
  </body>

使用 flex-wrap 可以实现弹性盒子 多行 排列效果,弹性盒子换行显示属性:flex-wrap:wrap;,默认不换行 flex-wrap:nowrap

HTML 复制代码
    <style>
      .box {
        display: flex;
        flex-wrap: wrap;

![image.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/67313a2243d141ae9a74374090d19399~tplv-k3u1fbpfcp-watermark.image?)
        height: 300px;
        border: 1px solid #000;
      }
      .box div{
        width: 100px;
        height: 100px;
        background-color: rgb(189, 189, 247);
      }
    </style>

调整 行对齐 方式用 align-content 属性,其取与 justify-content 基本相同,但没有 space-evenly

HTML 复制代码
    <style>
      .box {
        display: flex;
        flex-wrap: wrap;
        align-content: space-around;

        height: 300px;
        border: 1px solid #000;
      }
      .box div{
        width: 100px;
        height: 100px;
        background-color: rgb(189, 189, 247);
      }
    </style>
相关推荐
lichenyang4531 小时前
css模块化以及rem布局
前端·javascript·css
棉花糖超人1 小时前
【从0-1的CSS】第3篇:盒子模型与弹性布局
前端·css·html
Sally璐璐10 小时前
零基础学HTML和CSS:网页设计入门
前端·css
老虎062710 小时前
JavaWeb(苍穹外卖)--学习笔记04(前端:HTML,CSS,JavaScript)
前端·javascript·css·笔记·学习·html
三水气象台10 小时前
用户中心Vue3网页开发(1.0版)
javascript·css·vue.js·typescript·前端框架·html·anti-design-vue
灿灿1213810 小时前
CSS 文字浮雕效果:巧用 text-shadow 实现 3D 立体文字
前端·css
尘心cx11 小时前
前端-CSS-day1
前端·css
全宝13 小时前
🎨前端实现文字渐变的三种方式
前端·javascript·css
没有钱的钱仔13 小时前
STM32低功耗模式全面指南
css·stm32·css3
拾光拾趣录15 小时前
CSS常见问题深度解析与解决方案(第三波)
前端·css