在上一篇文章(flex布局入門(一))中介紹了flex布局的 flex-shrink
和 flex-grow
屬性愧驱。在上下文空間過多或過少時(shí)慰技,它們控制其中子元素?cái)U(kuò)展或收縮的大小。其中關(guān)于flex-grow
的介紹存在一些錯(cuò)誤组砚。
在上下文空間過少吻商,子元素收縮時(shí),收縮的大小與子元素各自的寬度有關(guān)糟红。
比如寬分別為 100
, 200
, 300
的元素(元素都被設(shè)置為flex-shrink: 1
)放置在寬為300
的上下文中艾帐,這些元素會(huì)分別被壓縮到 50
, 100
, 150
,它們收縮的大小正比于元素的寬度盆偿。
而由flex-grow
主導(dǎo)的伸展規(guī)則與之不同柒爸,元素伸展的寬度與自身的寬度無關(guān)。
比如寬分別為50
, 100
, 150
的元素(元素都被設(shè)置為flex-grow: 1
)放置在寬為600
的上下文中事扭,這些元素會(huì)分別伸展到 150
, 200
, 250
捎稚。每個(gè)元素伸展的大小相同,與自身的寬無關(guān)求橄。
上篇文章中今野,認(rèn)為flex-grow
主導(dǎo)的元素?cái)U(kuò)展大小與自身寬度成正比。這個(gè)論述是錯(cuò)誤的罐农,特此更正条霜。