flex: 1 是什么意思？

Question

As we all know, the flex property is a shorthand for the flex-grow , flex-shrink , and the flex-basis properties.它的默认值为 0 1 auto ，这意味着

flex-grow: 0;
flex-shrink: 1;
flex-basis: auto;

但我注意到，在很多地方都使用了 flex: 1 。它是 1 1 auto 或 1 0 auto 的简写吗？我不明白这是什么意思，当我用谷歌搜索时我什么也得不到。

原文由 Md Rafee 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

这是解释：

https://www.w3.org/TR/css-flexbox-1/#flex-common

flex: <正数>

等价于 flex: 1 0. 使 flex item 灵活并将 flex 基础设置为零，从而使 item 接收 flex 容器中指定比例的可用空间。如果 flex 容器中的所有项目都使用这种模式，它们的大小将与指定的 flex 因子成比例。

因此 flex:1 等价于 flex: 1 1 0

原文由 user4994625 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

flex: 1 含义如下：

 flex-grow : 1;    ➜ The div will grow in same proportion as the window-size
flex-shrink : 1;  ➜ The div will shrink in same proportion as the window-size
flex-basis : 0;   ➜ The div does not have a starting value as such and will
                     take up screen as per the screen size available for
                     e.g:- if 3 divs are in the wrapper then each div will take 33%.

原文由 Dhaval Chheda 发布，翻译遵循 CC BY-SA 4.0 许可协议