flex: 1、flex: auto和flex: none，你真的用对了吗？

引言

• 你能说出flex: 1、flex: auto、flex: none分别表示什么吗？
• 它们的区别是什么？
• 应用于哪些场景？

flex

flex: flex-grow、flex-shrink和flex-basis的简写，默认值是0 1 auto；按照以往经验，比如flex：1，我们可能会认为剩余的两个缺省属性就取默认值，但实际上flex的缩写并非如此

• flex: 1 => flex-grow: 1, flex-shrink: 1, flex-basis: 0%
• flex: auto => flex-grow: 1, flex-shrink: 1, flex-basis: auto
• flex: none => flex-grow: 0, flex-shrink: 0, flex-basis: auto

我们先来回顾flex项目的这三个属性：

• flex-grow: 控制Flex项目的放大比例（默认为0，即如果存在剩余空间，也不放大）
• flex-shrink: 控制Flex项目的缩小比例（默认为1，即如果空间不足，该项目将缩小，当空间不足时设置为0则不缩小；负值对该属性无效）
• flex-basis: 设置Flex项目在分配多余空间之前的默认大小，默认为auto（即项目本来的大小）。

flex：1

• flex-grow: 1;：当有可用空间时，该项目可以放大。所有设置了flex: 1的项目将平分额外空间。
• flex-shrink: 1;：当空间不足时，该项目可以缩小。
• flex-basis: 0%;：设置项目在分配多余空间之前的基础大小为0%。这意味着它不基于其内容的大小来决定大小，而是完全依赖于剩余空间的分配。

a、子元素全部无内容时，宽度为0不展示，但只要有一个子元素有内容就一定展示为均分

flex：auto

• flex-grow: 1;：当有可用空间时，该项目可以放大。
• flex-shrink: 1;：当空间不足时，该项目可以缩小。
• flex-basis: auto;：项目的基础大小基于其内容的大小。这是flex-basis的默认值。

a、当子元素的整体宽度小于父级元素宽度时，有内容的子元素剩余区域宽度一致

b、当子元素的整体宽度大于父级元素的总宽度时，无内容的子元素宽度为0不展示，剩余元素按比例自动计算各自占比的宽度

c、当子元素全都没有内容的时候，子元素的宽度都为0，不展示

flex:1 和 flex:auto 的行为表现区别：

元素尺寸可以弹性增大，也可以弹性变小，具有十足的弹性，但是 flex:1 在尺寸不足时会优先最小化内容尺寸，flex:auto 在尺寸不足时会优先最大化内容尺寸。

flex：none

• flex-grow: 0;：该项目不会放大。
• flex-shrink: 0;：该项目不会缩小。
• flex-basis: auto;：项目的基础大小基于其内容的大小。

展示效果：不扩展不压缩，宽度按真实内容填充，超出父级元素的宽度则溢出显示，没有内容则宽度为0不展示

应用场景：

• flex:none 适用于不换行的内容固定或者较少的小控件元素上，如按钮，大小完全由内容决定。
• flex:1 适合等分布局；不考虑其内容大小，适用于希望项目等分剩余空间的情况。
• flex:auto 适合基于内容动态适配的布局；首先考虑其内容大小，然后才是根据剩余空间进行放大或缩小，适用于希望项目根据内容调整大小，但仍然能够在有剩余空间时放大，在空间不足时缩小的情况。

参考

flex:0 flex:1 flex:none flex:auto应该在什么场景下使用？