flex:1是什么意思?flex:1和flex:auto有什么区别?

最新推荐文章于 2024-04-13 14:18:40 发布

PinkM∞n7

最新推荐文章于 2024-04-13 14:18:40 发布

阅读量408

点赞数

文章标签： css 前端

本文链接：https://blog.csdn.net/w1060436872/article/details/132823907

版权

css编辑样式的时候经常会用到flex:1来占满父元素的剩余空间，那么这个属性值具体是什么意思呢？

先来看下flex的使用语法：

flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]

所以flex 属性是flex-grow，flex-shrink和flex-basis这 3 个 CSS 属性的缩写.

接下来我们了解一下这三个属性分别代表什么（以下flex-direction均为row情况下讨论）:

flex-grow

flex-grow 规定在空间允许的情况下，子元素如何按照比例分配可用剩余空间：

它的默认值为0，意味着即使有剩余空间，各子元素也不会放大。

初始默认flex为0:

当第一个盒子flex为1:

当第二个盒子flex为2:

另外，flex-grow 不能设置负值。

与flex-grow属性类似，flex-shrink定义了空间不足时项目的缩小比例：

flex-shrink的默认值为1，当所有子元素都为默认值时，则空间不足时子元素会同比例缩小。

初始默认的三个盒子宽度之和大于外部时,由于flex未设置换行三个盒子挤在一行里,此时默认flex-shrink都为1:

当第一个盒子设为flex-shrink:0时:

当第二个盒子设为flex-shrink:2时:

flex-basis定义了在计算剩余空间之前子元素默认的大小，可以设置为某个长度（比如 20%, 4rem 等，相当于width）或者关键字。

默认初始样式:

当第一个盒子设为flex-basis:50%时

flex-basis默认值是关键字auto，代表这子元素会按照其本来的大小显示。

回到flex的基本语法

flex: none 很好理解，元素会根据自身宽高来设置尺寸。它是完全非弹性的：既不会缩短，也不会伸长来适应 flex 容器，相当于将属性设置为 flex: 0 0 auto。

再来看看 flex 设置成其他值时规则：

(1) 如果 flex 的属性值只有 1 个值，则具体规则如下：

如果是数值，如 flex:1，则这个 1 为 flex-grow 属性的值，此时 flex-shrink 属性和 flex-basis 属性的值分别是 1 和 0%。注意，这里的 flex-basis 属性是 0%，而不是默认值 auto。
如果是长度值，如 flex:100px，则这个 100px 显然为 flex-basis 属性的值，因为 3 个缩写的 CSS 属性中只有 flex-basis 的属性值支持长度值。此时 flex-grow 属性和 flex-shrink 属性的值都是 1，注意，这里的 flex-grow 属性的值是 1，而不是默认值 0。

(2) 如果 flex 的属性值有 2 个值，则第一个值一定是 flex-grow 属性值，第二个值根据值的类型不同对应不同的CSS属性，具体规则如下。

如果第二个值是数值，例如 flex:1 2，则这个 2 是 flex-shrink 属性的值，此时 flex-basis 属性计算值是 0%，并非默认值 auto。
如果第二个值是长度值，例如 flex:1 100px，则这个 100px 为 flex-basis 属性值。