了解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项目将具有相同的大小.

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