为什么一个元素有{flex：1; width：0; }还有宽度？ [英] Why does an element with { flex: 1; width: 0; } still have width?

问题描述

Facebook使用此CSS：

  {flex：1; width：0;} 
  

但是div仍有宽度。

flex：1 等价于 flex：1 1 0 ，两者都是以下等同形式的缩写：

• flex-grow：1


• flex-shrink：1


• flex-basis：0

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

flex-basis：0 = width：0 b
$ b

如果这个 flex-basis / width

但是，这些属性只设置一个flex项目的初始主要尺寸

使用 flex-grow：1 ，项目将消耗所有在 flex-basis / width 中考虑了之后的可用空间 p>

详情：

• 弹性基础和宽度之间有什么区别？


• 7.1。 flex 速记


• 7.1.1。 flex 的基本值

Facebook uses this CSS:

{flex: 1;  width: 0;}

but the div still has width.

解决方案

You're asking about two different properties and functions.

flex: 1 is equivalent to flex: 1 1 0, both of which are shorthand equivalents of:

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

When you add width: 0, it's actually redundant and unnecessary in a row-direction container, like the one in the question.

flex-basis: 0 = width: 0 in this case.

If this flex-basis / width rule were by itself, then you would have your expected behavior: The element would have 0 width.

However, these properties only set the initial main size of a flex item, before free space is distributed by other flex properties.

With flex-grow: 1, the item will consume all available space on the line after having factored in flex-basis / width.

More information:

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

这篇关于为什么一个元素有{flex：1; width：0; }还有宽度？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！