在上一篇文章(flex布局入门(一))中介绍了flex布局的 flex-shrink
和 flex-grow
属性。在上下文空间过多或过少时,它们控制其中子元素扩展或收缩的大小。其中关于flex-grow
的介绍存在一些错误。
在上下文空间过少,子元素收缩时,收缩的大小与子元素各自的宽度有关。
比如宽分别为 100
, 200
, 300
的元素(元素都被设置为flex-shrink: 1
)放置在宽为300
的上下文中,这些元素会分别被压缩到 50
, 100
, 150
,它们收缩的大小正比于元素的宽度。
而由flex-grow
主导的伸展规则与之不同,元素伸展的宽度与自身的宽度无关。
比如宽分别为50
, 100
, 150
的元素(元素都被设置为flex-grow: 1
)放置在宽为600
的上下文中,这些元素会分别伸展到 150
, 200
, 250
。每个元素伸展的大小相同,与自身的宽无关。
上篇文章中,认为flex-grow
主导的元素扩展大小与自身宽度成正比。这个论述是错误的,特此更正。