你了解flex布局的复杂长尾应用场景吗？

你了解flex布局的复杂长尾应用场景吗？

Ru果这时候`flex-grow`还是dou是1， 那这40px的剩余空间就一人一半，各分20px。Zui终item1的宽度是30+20=50px，item2是40+20=60px。kan到没？margin并没有参与flex-grow的分配，但它确实挤占了空间，影响了剩余量的计算，我倾向于...。

Ru果不缩水， 内容总宽是100+200=300px，加上40px的margin，总共需要340px的空间。 操作一波。 但是容器只有280px，这就意味着差了60px！这60px得从项目身上扣回来。

大胆一点... Zui后来kan个Zui烧脑的。容器变窄了只有280px。item1宽100px，item2宽200px。margin依然是10px。

蚌埠住了... 咱们把难度稍微提一点。容器还是150px，margin还是10px。但是这次item1的`flex-grow`设为1，item2的设为3。

我心态崩了。 你kan，这就是Flex布局严谨又迷人的地方。它不是简单的加减法，而是一套精密的权重分配系统。

Ru果我们给这两个项目dou设置`flex-grow: 1`，会发生什么？hen简单，那30px的剩余空间会被平分。item1变成30px + 15px = 45px，item2变成40px + 15px = 55px。这就像发年终奖，大家系数一样，那就平均分。

Flex-Grow：灵活分配剩余空间

聊完了这些硬核的计算，咱们再回到实际应用中。现在的移动端开发，Flex布局几乎是标配。但光有Flex还不够，通常我们会把它和rem结合起来用。

格局小了。 在分配多余空间或者计算缩水之前，浏览器总得先知道大家原本打算占多大地方吧？这就是`flex-basis`的作用。它相当于给项目设定了一个“理想宽度”。Ru果你没设这个值， 浏览器就会去kan你设置的`width`，Ru果连`width`dou没有，那就。

假设我们有一个容器，宽度设为100px。里面有两个子项目，item1宽度30px，item2宽度40px。这时候，两个子项目加起来才70px，容器里还空着30px，麻了...。

Flex-Basis：设定初始宽度

Flex-Shrink：控制元素缩水

Flexible Box ：弹性盒子模型

核心思想：赋予容器弹性

权重与比例

缩水与压缩

为什么 Flex 可能让元素变小？

默认缩水行为

Flexible Box 与 Rem 的完美结合