为什么带有{flex：1;的元素？宽度：0; }还有宽度吗？

Question

Facebook使用以下CSS：

{flex: 1;  width: 0;}

但div仍具有宽度。

Answer 1

您正在询问两种不同的属性和功能。

flex: 1等价于flex: 1 1 0，两者都是以下的速记等价物：

• flex-grow: 1
• flex-shrink: 1
• flex-basis: 0

当您添加时width: 0，它在行方向容器中实际上是多余的和不必要的，就像问题中的那个一样。

flex-basis: 0=width: 0在这种情况下。

如果此flex-basis/width规则本身是，那么您将拥有预期的行为：该元素的宽度为 0。

然而，这些属性只设置了一个 flex 项的初始主要大小，然后其他 flex 属性分配可用空间。

使用flex-grow: 1，该项目将在考虑flex-basis/后width消耗该行上的所有可用空间。

更多信息：

• flex-basis 和 width 有什么区别？
• 7.1. 该flex速记
• 7.1.1. 的基本价值观flex