二十七、使用 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>
相关推荐
青皮桔8 小时前
CSS实现百分比水柱图
前端·css
失落的多巴胺8 小时前
使用deepseek制作“喝什么奶茶”随机抽签小网页
javascript·css·css3·html5
牧杉-惊蛰11 小时前
uniapp微信小程序css中background-image失效问题
css·微信小程序·uni-app
哎呦你好12 小时前
【CSS】Grid 布局基础知识及实例展示
开发语言·前端·css·css3
islandzzzz13 小时前
(第二篇)HMTL+CSS+JS-新手小白循序渐进案例入门
前端·javascript·css·html
晴殇i15 小时前
CSS 迎来重大升级:Chrome 137 支持 if () 条件函数,样式逻辑从此更灵活
前端·css·面试
Hilaku15 小时前
2025年,每个前端都应该了解的CSS选择器:`:has()`, `:is()`, `:where()`
前端·css
sunbyte15 小时前
50天50个小项目 (Vue3 + Tailwindcss V4) ✨ | DragNDrop(拖拽占用组件)
前端·javascript·css·vue.js·vue
旷世奇才李先生16 小时前
CSS 安装使用教程
前端·css
遗憾随她而去.16 小时前
深入理解CSS中的BFC 与IFC , 布局的两大基础概念
前端·css