二十七、使用 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>
相关推荐
每天开心1 小时前
深入理解 CSS 选择器:从基础到高级
css·html·ai编程
撰卢2 小时前
如何提高网站加载速度速度
前端·javascript·css·html
sophister2 小时前
Flex 布局中容易踩的那些坑,你踩过几个?
前端·css·html
MiyueFE2 小时前
CSS 函数与混入草案:原生 CSS 的“魔法”即将登场!
前端·css
呆呆的心6 小时前
揭秘 CSS 伪元素:不用加标签也能玩转出花的界面技巧 ✨
前端·css·html
爱学习的小学渣6 小时前
Css: flex布局+趣味Demo
css
wuxuanok6 小时前
Web前端开发-HTML、CSS
前端·css·html
lichenyang4539 小时前
css模块化以及rem布局
前端·javascript·css
棉花糖超人9 小时前
【从0-1的CSS】第3篇:盒子模型与弹性布局
前端·css·html
Sally璐璐18 小时前
零基础学HTML和CSS:网页设计入门
前端·css