flex:1 实现布局的自动填充的一点疑惑
来源：4-8 高频技巧，填充屏幕剩余空间实现大范围事件监听
潜龙勿用s
2021-05-17
黄老师：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。实现布局自动填充吗。
写回答
1回答
-
如果需求只是实现自动填充的话，那这两者使用没啥区别。
但是这两种设置方式，会影响空间分配大小。
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，元素内部没有多余空间。
312021-05-22
相似问题