为什么一个元素有{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项目的初始主要尺寸
使用 详情: Facebook uses this CSS: but the div still has width. You're asking about two different properties and functions. When you add If this However, these properties only set the initial main size of a flex item, before free space is distributed by other flex properties. With More information: 这篇关于为什么一个元素有{flex:1; width:0; }还有宽度?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋! flex-grow:1
,项目将消耗所有在 flex-basis
/ width
中考虑了之后的可用空间 p>
{flex: 1; width: 0;}
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
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.flex-basis
/ width
rule were by itself, then you would have your expected behavior: The element would have 0 width.flex-grow: 1
, the item will consume all available space on the line after having factored in flex-basis
/ width
.
flex
Shorthandflex