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

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

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • H5移动端知识点总结 阅读目录 移动开发基本知识点 calc基本用法 box-sizing的理解及使用 理解dis...
    Mx勇阅读 10,140评论 0 26
  • 移动开发基本知识点 一.使用rem作为单位 html { font-size: 100px; } @media(m...
    横冲直撞666阅读 8,916评论 0 6
  • 简单介绍 Flexible Box 模型,通常被称为 flexbox,是CSS3中新出现一种一维的布局模型。它给 ...
    原上的小木屋阅读 5,678评论 0 1
  • CSS 是什么 css(Cascading Style Sheets),层叠样式表,选择器{属性:值;属性:值}h...
    崔敏嫣阅读 5,363评论 0 5
  • 美国作家弗格森:谁都无法说服他人改变,因为我们每个人都守着一扇只能从内开启的改变之门,不论动之以情或说之以理,我们...
    心有jing气阅读 3,523评论 0 0

友情链接更多精彩内容