更正!上篇文章中出现了一个错误。

在上一篇文章(flex布局入门(一))中介绍了flex布局的 flex-shrinkflex-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主导的元素扩展大小与自身宽度成正比。这个论述是错误的,特此更正。

你可能感兴趣的:(更正!上篇文章中出现了一个错误。)