了解flex和flex grow属性之间的差异

设置flex:1的效果有什么不同和设置flex-grow:1?当我在代码中设置前者时,我拥有的两列以相等的宽度显示,而当我设置后者时,它们不会这样做

这很奇怪,因为我假设设置flex:1仅影响flex grow属性

flexflex-growflex-shornflex-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项在分配空闲空间后将具有相同的大小

在第二种情况下,每个flex项将以其内容给定的大小开始,然后根据可用空间进行增长或收缩。最有可能的结果是尺寸不同

发表评论