一文搞懂 flex 属性

深入理解Flex布局：flex-grow, flex-shrink与flex-basis

最新推荐文章于 2025-10-01 22:39:46 发布

原创最新推荐文章于 2025-10-01 22:39:46 发布 · 781 阅读

CC 4.0 BY-SA版权

3 篇文章

订阅专栏

2 篇文章

订阅专栏

本文详细介绍了Flex布局中的三个关键属性：flex-grow、flex-shrink和flex-basis，包括它们的作用、默认值以及如何影响子元素的扩展和收缩。通过具体的示例和计算公式，帮助读者深入理解这些属性在不同场景下的应用。

flex-grow：扩展子元素长度
flex-shrink：收缩子元素长度
flex-basic：设置子元素长度

flex-grow 和 flex-shrink 属性是基于父元素的长度进行计算的
flex-basic 实际上就是给子元素设定默认值，可以理解为直接他宽高设定默认值

建议概念比较模糊的同学先不要合起来使用 flex 属性，如 flex: 0 1 auto
因为拆分用对每个属性的用途会更加清晰

扩展长度公式 = ( 父元素长度 - 所有子元素长度 ) / flex-grow 比值总数 * flex-grow

容器宽度为 800px，子元素 width 为 150px，一个有 4 个

例子1：
当 flex-grow 比为 1 : 1 : 1 : 1 时
扩展长度 = ( 800 - 600 ) / 4 * 1 = 50
所以实际 flex子元素 宽度为 200px
例子2：

当 flex-grow 比为 1 : 2 : 3 : 4 时，flex-grow 比值总数 = 1+2+3+4 = 10
扩展长度1 = ( 800 - 600 ) / 10 * 1 = 20
扩展长度2 = ( 800 - 600 ) / 10 * 2 = 40
扩展长度3 = ( 800 - 600 ) / 10 * 3 = 60
扩展长度4 = ( 800 - 600 ) / 10 * 4 = 80
所以实际 flex子元素 宽度为
150 + 20 = 170
150 + 40 = 190
150 + 60 = 210
150 + 80 = 230

收缩长度公式 = abs( 父元素长度 - 所有子元素长度 ) / flex-shrink 比值总数 * flex-shrink

容器宽度为 800px，子元素 width 为 300px，一个有 4 个

例子1：
当 flex-shrink 比为 1 : 1 : 1 : 1 时
收缩长度 = abs( 800 - 1200 ) / 4 * 1 = 100
所以实际 flex子元素 宽度为 200px
例子2：
当 flex-shrink 比为 1 : 2 : 3 : 4 时，flex-shrink 比值总数 = 1+2+3+4 = 10
扩展长度1 = abs( 800 - 1200 ) / 10 * 1 = 20
扩展长度2 = abs( 800 - 1200 ) / 10 * 2 = 40
扩展长度3 = abs( 800 - 1200 ) / 10 * 3 = 60
扩展长度4 = abs( 800 - 1200 ) / 10 * 4 = 80
所以实际 flex子元素 宽度为
300 - 40 = 260
300 - 80 = 220
300 - 120 = 180
300 - 160 = 140
例子3：
当某一子元素 flex-shrink 比值过于大时，如 1:2:3:18
该子元素计算得出宽度将趋近于0，flex布局就会按照该元素内容的宽度大小来设置其宽度，同时这个宽度也会影响到其他的 flex子元素
假设这个 flex-shrink 为18的 flex子元素内容宽度为18px
300 - ( 800 - 1200 ) / 24 * 1 - 18 / ( 1 + 2 + 3 ) * 1 = 280.34
300 - ( 800 - 1200 ) / 24 * 2 - 18 / ( 1 + 2 + 3 ) * 2 = 260.66
300 - ( 800 - 1200 ) / 24 * 3 - 18 / ( 1 + 2 + 3 ) * 3 = 241

flex-basic 值为auto时，按照子元素宽度来计算：
下面例子的第一个子元素内容为空，宽度没有设置，所以没有展示
子元素设置了 flex-basic 值，同时也设置了子元素 width，则按 flex-basic 值计算：
下面例子 flex-basic 为150px， width 为160px，最终展示时150
设置了 flex-grow 或 flex-shrink，flex子元素实际宽度不会直接按 flex-basic 展示，会根据伸缩比计算再分配相应宽度：
下面例子 flex-basic 为150px，flex-grow为1，最终展示是经过扩展的
如 flex子元素设置了 min-width 或 max-width，当 flex-basic 值小于 min-width 则按照 min-width 值设置 flex子元素宽度，同理 min-width 亦然：
下面例子第一个子元素 min-width 为180px，其他子元素 flex-basic 为150px

下面例子第一个子元素 max-width 为50px，其他子元素 flex-basic 为150px，flex-grow 为1