flex:1 实现布局的自动填充的一点疑惑

Question

黄老师：
flex: 1; 等同于 flex-grow: 1; flex-shrink: 1; flex-basis: auto; 的简写。但是除了flex-grow的默认值为 0 ，flex-shrink 的默认值就是1，flex-basis的默认值就是auto。我们可以不使用 flex: 1，直接写 flex-grow: 1。实现布局自动填充吗。

Answer 1

沁尘 2021-05-18 10:02:26

如果需求只是实现自动填充的话，那这两者使用没啥区别。

但是这两种设置方式，会影响空间分配大小。

flex1 等价于 flex-grow: 1; flex-shrink: 1; flex-basis: 0; (不是 auto)

flex-grow: 1 等价于flex-grow: 1; flex-shrink: 1; flex-basis: auto; 

这里的区别主要在flex-basis，flex-basis为 auto，这元素会参考自身的宽高来初始化大小；如果为 0，它的高度就是 0，元素内部没有多余空间。

• 提问者 潜龙勿用s #1

  谢谢老师解答，flex-basis的默认值是auto，我记错成0了┌(。Д。)┐