摘要：第二个子元素将分配到，因为其伸缩放大系数为。你也可以赋予你的子元素一个伸缩收缩系数，如下伸缩收缩系数，尽管称谓如此，但还是正值即上述声明中的第二个无单位值。由于子元素上设置了伸缩收缩系数第一个子元素将移除溢出量的，即。其计算值因此变为。
让你的元素伸缩原文：https://dev.opera.com/articles/flexbox-basics/
译者注：本文仅简单翻译下原文中关于如何计算 flex 属性的值的部分。其他有关 Flex 布局的知识本文不作探讨。
2015.12.5更新：关于 flex 不同的取值情况，以及 flex-basis 的取值意义，请参考我在这个问题中的回答：http://segmentfault.com/q/1010000004080910/a-1020000004100314
伸缩盒最强大的特性或许就在于能使得伸缩流方向中的子元素的长度（如果 flex-flow 为 row ，长度指 width，如果 flex-flow 为 column 则指 height）成为可伸缩量，该长度随伸缩流中父元素的可用空间量而变化。该特性通过使用 flex 属性实现，此属性的值由三部分构成。让咱们一个个地来添加这些部分同时观察其影响。首先，一个“伸缩放大系数 flex grow factor ”：
#first {flex: 1;}
#second {flex: 1;}
#third {flex: 1;}
这些无单位值用作比例——它们规定每个子元素应当占据父元素中的多少可用空间。如果都设置为 1，则在伸缩盒中的每个子元素将设为相等尺寸。如果给其中一个子元素赋值为 2，则该子元素将占据其他子元素的两倍空间，如下所示：
#first {flex: 1;}
#second {flex: 2;}
#third {flex: 1;}
你也可以为每个子元素设置一个伸缩基准值 flex basis，比如这样：
#first {flex: 1 200px;}
#second {flex: 2 300px;}
#third {flex: 1 250px;}
首先，根据伸缩流方向将伸缩基准值应用为每个子元素的宽度或高度。接着，根据伸缩放大系数，将父元素内剩余空间分配给子元素，得到子元素的最终宽度。据此当总共 750px 时，子元素主轴方向上尺寸为 200px，300px 和 250px。如果父容器主轴方向为 950px，那么将多出 200px 来分配给子元素。第一个和第三个子元素分别分配到 50px，因为其伸缩放大系数为 1，它们最终尺寸各为 250px 和 300px。第二个子元素将分配到 100px，因为其伸缩放大系数为 2。其最终尺寸为 400px。
flex 的第三部分值很少用到，但以防万一咱们还是看看。你也可以赋予你的子元素一个“伸缩收缩系数 flex shrink factor”，如下：
#first {flex: 1 1 400px;}
#second {flex: 2 3 600px;}
#third {flex: 1 2 400px;}
伸缩收缩系数，尽管称谓如此，但还是正值——即上述声明中的第二个无单位值。它们只有当子元素在主轴上溢出父容器的时候才会生效。它们也是作为比例值，但它们规定的是“溢出量”（子元素溢出父盒在之外的量）的比例，溢出量将从每个子元素的尺寸里面扣除，从而使得子元素总尺寸减少到和父元素的尺寸相等——实际上就是要阻止溢出。
我们来考虑主轴上 1100px 的父容器。这将造成我们上面的子元素溢出父容器 300px（子元素在主轴上总共是 1400px）。由于子元素上设置了伸缩收缩系数：
第一个子元素将移除溢出量的 1/6，即 50px。其计算值因此变为 350px。
第二个子元素将移除溢出量的 3/6，即 150px。其计算值因此变为 450px。
第三个子元素将移除溢出量的 2/6，即 100px。其计算值因此变为 300px。
因此伸缩收缩系数越高元素反而越小。
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/111221.html
摘要：三个元素会从左往右占据父元素的空间这很显然。左右侧边栏的宽度都是，中间元素的宽度将会占据元素的剩余宽度。同样会导致父元素有部分剩余空间没有分配。 自从开始开学习 CSS 布局，想要比较灵活的把父元素的空间分配给各个子元一直是各个前端程序员的梦想。在 flex 之前，如果不是专门去搜索相关的解决方案，一般人几乎想不出非常灵活的三（多）栏等高布局方案，而即使看了解决方案，很多人也会大呼奇技...
摘要：几种常见布局的写法首先要对父元素设置布局方式，同时在本案例中，利用媒体查询，当屏幕分辨率小于的时候，布局变成纵向排列。两列布局定宽是的简写方式。 flex布局目前基本上兼容主流的浏览器，且实现方式简单。我整理了flex的一些知识点，并且总结归纳了几种常见布局的flex写法 flex基础知识点 flex-grow和flex-shrink相关计算公式 公式1：子元素空间 < 父容器 父...
摘要：后两个属性可选，该属性有两个快捷值和。属性定义了项目的缩小压缩比例，默认为，即如果空间不足，该项目将缩小。属性定义了在分配多余空间之前，项目占据的主轴空间。当我们设置，项目控件由于不能计算多余的空间导致无法收缩了。 写在最前：当flex遇到white-space:nowrap，你知道怎么破局吗？切图带你分析原理，三个方案任意选择！ 一、场景： showImg(https://segm...
摘要：应该把其中的每一行都视为单独的弹性容器。这个空间被称为正自由空间。这项工作是在文件中完成的，它负责跟踪项目依赖及其版本。 翻译：疯狂的技术宅原文：https://medium.com/swlh/css-f... 本文首发微信公众号：jingchengyideng欢迎关注，每天都给你推送新鲜的前端技术文章 介绍 Flexbox是 Flexible Box Module（弹性盒模型）...
阅读 2557·2021-10-25 09:45
阅读 1220·2021-10-14 09:43
阅读 2275·2021-09-22 15:23
阅读 1501·2021-09-22 14:58
阅读 1919·2019-08-30 15:54
阅读 3526·2019-08-30 13:00
阅读 1324·2019-08-29 18:44
阅读 1554·2019-08-29 16:59
