10 分钟吃透 Flexbox：从“玄学”到“秒画”布局写给被 float 、position 支配到崩溃的你，一套属

前言

还在用 float + margin 做居中？还在给 position: absolute 算 top: 50%？ Flexbox 把“对齐”这件事抽象成“两条轴” + “六个核心属性”，10 分钟就能学会，学会就能秒画 90% 业务布局。
本文把属性拆成“父容器”和“子容器”两块，配一张图 + 一段代码，复制即可运行。

一、父容器：先定轴，再排兵

属性	一句话记忆	常用值
display: flex	先让盒子变成“弹性盒”	`flex`
flex-direction	决定主轴方向	`row`（默认）、`column`
justify-content	主轴对齐	`center`、`space-between`、`space-evenly`、`space-around`
align-items	交叉轴单行对齐	`center`、`start`、`end`
flex-wrap	是否换行	`nowrap`（默认）、`wrap`、`wrap-reverse`（换到最底下）
align-content	交叉轴多行对齐	与 `justify-content` 语法完全一致，仅作用于“多行”场景

记忆口诀：“轴”→“换行”→“对齐”，先定方向再想排兵布阵。

1.1 主轴 vs 交叉轴

.box{ display:flex; flex-direction:row; }   /* x 轴是主轴 */
.box{ display:flex; flex-direction:column; }/* y 轴是主轴 */

只要记住一句话：justify-* 永远跟着主轴走，align-* 永远跟着交叉轴走。

1.2 一张图看懂 justify-content

值	图例（row 主轴）	场景
`start`	■□□□□	左对齐
`end`	□□□□■	右对齐
`center`	□□■□□	居中
`space-between`	■□■□■	两端对齐，中间等分
`space-evenly`	□■□■□	所有缝隙完全相等
`space-around`	□■□□■□	元素两侧间距相等

注意：space-around 是“元素左右各一半间距”，视觉缝隙 = 元素间一份、首尾半份。

1.3 换行后多行间距：align-content

只有 flex-wrap:wrap 且出现多行时才生效，语法与 justify-content 完全一致。

示例：垂直居中多行标签

  <style>
    .item{
      width: 200px;
      height: 100px;
    }
    .item:nth-child(1){
      background-color: #ed5c5c;
    }
    .item:nth-child(2){
      background-color: #62e965;
    }
    .item:nth-child(3){
      background-color: #e763e9;
    }

    .box{
      width: 300px;
      height: 400px;
      border: 1px solid #000;
      display: flex;
      flex-wrap: wrap;   /*换行*/
      align-content: center;   /*多行垂直居中*/
      justify-content: center;   /*水平居中*/

    }
  </style>
</head>
<body>
  <div class="box">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
  </div>
</body>
</html>

二、子容器：抢占空间、插队排序

属性	一句话记忆	常用值
order	插队，数字越小越靠前	`0`（默认）、负值往前
flex-grow	剩余空间瓜分比例	`0`（默认）、`1`、正数
flex-shrink	空间不足时收缩比例	`1`（默认）、`0` 不收缩
flex-basis	项目“天然”大小	`auto`、固定 `200px`
flex	三合一缩写	`0 1 auto`（默认）
align-self	单独修改某一个子元素在交叉轴上的排列方式	同 `align-items`

2.1 flex 缩写到底怎么写？

.item{ flex: 0 1 auto; }   /* 默认，不放大可缩小 */
.item{ flex: 1 1 200px; }  /* 放大比例1，优先200px */
.item{ flex: 0 0 200px; }  /* 固定200px，不伸不缩 */

口诀：“伸缩基准” 顺序永远不变。

2.2 经典场景：三栏布局

需求：左右固定，中间自适应。
代码：

<style>
    .page{
      height: 200px;
      display: flex;
    }
    .left, .right{
      width: 200px;
      background-color: #e17a7a;
    }
    .main{
      background-color: aquamarine;
      flex: 1;  /*当父容器空间有盈余，该属性可以让子元素默认放大占满父容器*/
    }
    .left{
      order: -1;  /*让它排在前面*/
    }
  </style>
</head>
<body>
  <div class="page">
    <div class="main">主体</div>
    <div class="left">左侧</div>
    <div class="right">右侧</div>
  </div>
</body>

三、常见坑位速查表

坑	表现	解法
子元素 `height:100%` 失效	父没高度	给父 `display:flex` + `flex-direction:column` 即可
`img` 被拉伸	缺 `align-self`	给 `img{ align-self:center; }` 或 `flex:0 0 auto`
不换行被撑爆	父容器宽度被撑开	给子元素 `flex-shrink:1` 或 `max-width:100%`

四、一张思维导图

graph TD
    A[display:flex] --> B[flex-direction 定主轴]
    B --> C[justify-content 主轴对齐]
    B --> D[align-items 交叉轴单行对齐]
    B --> E[flex-wrap 换行]
    E --> F[align-content 交叉轴多行对齐]
    G[子元素] --> H[order 插队]
    G --> I[flex-grow 瓜分]
    G --> J[flex-shrink 收缩]
    G --> K[flex-basis 基准]
    G --> L[align-self 单独修改子元素]

五、结语(让 Flexbox 成为肌肉记忆)

恭喜你，已经集齐“两条轴” + “六个核心属性”的全部拼图！下次遇到「水平垂直居中」「左固定右自适应」「多行标签等间距」别再写 float、position 算半天——直接复制本文代码，粘贴即上线。把文章收藏到浏览器书签或掘金收藏夹，配一张思维导图贴在工位，写布局时瞄一眼，10 秒默写属性。当你不再纠结对齐，就能把更多时间花在业务、交互与体验上——这才是 Flexbox 带给我们的真正自由。

10 分钟吃透 Flexbox：从“玄学”到“秒画”布局

前言