为什么一个元素有{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 进行分析后，该项目将消耗行上的所有可用空间。

更多信息：

• What are the differences between flex-basis and width?
• 7.1. The flex Shorthand
• 7.1.1. Basic Values of flex