「前端必备」Flex 布局全解析：从入门到深度计算，搞懂弹性盒子！

Flex 布局是前端必会技能，尤其是做一维排版（横排或竖排）特别好用。看似简单，实际灵活度超高，但深入细节，比如 flex-grow 和 flex-shrink 的计算，有点绕。本文结合真实案例，帮你把 Flex 玩透彻。

一、Flex 布局基础回顾

给容器加 display: flex，子元素自动变弹性盒子
默认主轴是水平方向（row），也能改竖排（column）
通过 flex-direction 控制方向，justify-content 和 align-items 控制对齐

二、拆解 flex 属性

css 复制代码

flex: <flex-grow> <flex-shrink> <flex-basis>;
flex: 2 1 100px;

flex-grow: 2 → 如果容器中有剩余空间，这个元素会按照"2"的比例去扩展。也就是说，它能"长大"，而且会比 flex-grow: 1 的元素扩展得更多。
flex-shrink: 1 → 如果容器空间不足，元素需要"缩水"，这个 shrink 值决定它的收缩能力。1 表示它是可收缩的，但比 flex-shrink: 2 更抗拒收缩。
flex-basis: 100px → 这是它的初始"基础宽度"，在分配空间之前，元素就占 100px。注意，这里不是最终宽度，而是计算扩展或收缩的起点。

三、flex-shrink 收缩计算

假设容器宽 300px，两个元素宽 500px 和 400px，flex-shrink 比例是 2:1，咋分收缩空间？

总宽：500 + 400 = 900
超出空间：900 - 300 = 600
权重：左 500×2=1000，右 400×1=400，合计 1400
左边收缩：600 × 1000/1400 ≈ 428.57
右边收缩：600 × 400/1400 ≈ 171.43
最终宽度：左 500-428.57=71.43，右 400-171.43=228.57

四、flex-grow 扩展计算

容器宽 600px，两个元素宽 300px 和 200px，flex-grow 比例 1:2，空间怎么分？

剩余空间：600 - 300 - 200 = 100
左边分配：100 × 1/3 ≈ 33.33
右边分配：100 × 2/3 ≈ 66.67
最终宽度：左 333.33，右 266.67

五、两列布局实战

html 复制代码

<div class="container">
  <aside>广告或菜单</aside>
  <main>主题内容</main>
</div>

css 复制代码

.container {
  display: flex;
  flex-direction: row;
}
aside {
  flex: 2 1 500px;
  background: pink;
}
main {
  flex: 1 5 500px;
  background: greenyellow;
}

左边固定（收缩比例小），右边更灵活（扩展比例大）
典型的"固定侧边栏 + 自适应内容区"

六、三列布局示例

html 复制代码

<div class="container">
  <div class="left">左侧</div>
  <div class="center">中间</div>
  <div class="right">右侧</div>
</div>

css 复制代码

.container {
  display: flex;
}
.left {
  flex: 1 1 100px;
  background: red;
}
.center {
  flex: 2 1 200px;
  background: yellow;
}
.right {
  flex: 1 1 100px;
  background: blue;
}

中间宽度是左右的两倍，经典布局
轻松应对多栏布局

七、总结

Flex 的关键点：

flex-direction 控制方向
flex-grow 控制多余空间分配
flex-shrink 控制收缩比例
flex-basis 定义基础尺寸

熟练掌握这些，Flex 布局就不再神秘，响应式页面更轻松！

想掌握 Flex，最重要的是多动手，多写写，观察不同参数带来的变化。祝你成为 Flex 大师！