了解flex和flex-grow属性之间的区别

Question

设置flex: 1;和设置flex-grow: 1;之间的效果有何不同？当我在我的代码中设置前者时，我显示的两列具有相同的宽度，而当我设置后者时它们不会这样做。

这很奇怪，因为我认为设置flex: 1;只影响flex-grow属性。

Answer 1

flex是flex-grow，flex-shrink和flex-basis的简写属性。

在这种情况下，flex: 1设置

• flex-grow: 1
• flex-shrink: 1
• flex-basis: 0（在旧版规范草案中flex-basis: 0%）

如果您只使用flex-grow: 1，则会有

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

然后，区别在于第一种情况下flex基本大小为0，因此在分配可用空间后，flex项目的大小将相同。

在第二种情况下，每个弹性项目将以其内容给定的大小开始，然后根据可用空间增大或缩小。最有可能的是尺寸最终会有所不同。