Flex Box

以下讨论的属性无论大小,收缩或者伸展,均是按照flex conntainer的主轴方向说的。

flex-grow: 是否允许flex item在多余空间内伸展。默认为0, 即不允许伸展。

flex-shrink: 是否允许flex item在flex container宽度收缩时自动收缩。默认为1,即允许。

flex-basis: 指定flex item的初始大小。 默认值为auto, 意味着flex item会根据内容的大小自动决定。

flex: flex grow flex-shrink flex-basis的缩写。

flex: 2 <=> flex: 2 1 0, 表示将flex item的初始宽度设置为0,然后伸展项目以填满可用空间,并且在某些情况下也可以收缩flex item。

原文地址:https://www.cnblogs.com/gogolee/p/7049487.html