今天小编跟大家讲解下有关css Flex布局的可伸缩性(Flexibility) ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关css Flex布局的可伸缩性(Flexibility) 的相关资料，希望小伙伴们看了有所帮助。
Flexibility
Flex伸缩布局决定性的特性是让伸缩项目可伸缩 也就是让伸缩项目的宽度或高度自动填充剩余的空间。这可以以flex属性完成。一个伸缩容器会等比地按照各伸缩项目的 扩展比率 分配剩余空间 也会按照 收缩比率 缩小各项目以避免溢出。
Flex属性
flex属性可用来指定 可伸缩长度 的部件：扩展比率 收缩比率 伸缩基准线。当有一个元素是伸项目时 flex属性将代替主轴长度属性决定元素的主轴长度。若元素不是伸缩项目 则flex属性不生效。
flex 是 flex-grow、flex-shrink、flex-basis的缩写
.item { flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]} <'flex-grow'> 取值为 <number> 用来指定项目的扩展比率；若在flex缩写省略了此属性值 则flex-grow的指定值是 1； <'flex-shrink'>取值为 <number> 用来指定项目的收缩比率；若在flex缩写省略了此属性值 则flex-shrink的指定值是 1； <'flex-basis'>取值为 <length> | auto 用来定义在分配多余空间之前 项目占据的主轴空间 也就是子元素的基准值 flex-basis 规定的范围取决于 box-sizing；若在flex缩写省略了此属性值 则flex-basis的指定值是 0%。flex-basis取值的几种情况：
固定的长度值 （比如350px） 则该项目将占据固定长度的空间； auto,首先会检索该项目的主尺寸（也就是该项目的width/height的值 是width还是height取决于主轴的方向 下面假设主轴的方向为水平方向） 如果该项目的主尺寸不为auto 则该项目的flex-basis（基准值）采用主尺寸的值；如果该项目的主尺寸为auto（也就是width:auto或不设置项目的width属性时） 则使用该项目的内容content大小为基准值； 百分比 根据其包含块（即伸缩父容器）的主尺寸计算。如果包含块的主尺寸未定义（即父容器的主尺寸取决于子元素） 则计算结果和设为 auto 一样。flex 的常见值
flex的默认值：由于 flex-grow、flex-shrink、flex-basis三个属性值在不设置的情况下默认值分别为 0、1、auto 所以flex的默认值为：flex:0 1 auto;
.item { flex: 0 1 auto;}flex: 0 auto：由于之前提到过 若在flex的缩写中省略了flex-shrink的值 则该值指定为 1 所以flex:0 auto就相当于flex:0 1 auto（也就是与flex取默认值一样）；
flex: initial：与flex:0 1 auto相同；
flex: auto: 若在flex的缩写中省略了flex-grow和flex-shrink的值 则他们的值都指定为 1 所以flex:auto就相当于flex:1 1 auto；
.item { flex: auto; }flex:none：相当于flex: 0 0 auto;
.item { flex: none; }当flex取值为某个正数时 则这个正数是flex-grow的取值 由于在flex的缩写中省略了flex-shrink和flex-basis的值 而他们在被省略了时的取值分别为1、0% 所以flex:1就相当于flex:1 1 0%；
.item { flex: 1; }当 flex 取值为一个长度或百分比 则视为 flex-basis 值 flex-grow 取 1 flex-shrink 取 1（注意 0% 是一个百分比而不是一个非负数字）；
.item { flex:120px; }.item1 { flex: 0%; }当 flex 取值为两个非负数字 则分别视为 flex-grow 和 flex-shrink 的值 flex-basis 取 0%；
.item { flex:2 1; }当 flex 取值为一个非负数字和一个长度或百分比 则分别视为 flex-grow 和 flex-basis 的值 flex-shrink 取 1；
.item { flex:2 120px; }举例
html如下：
<div class="box"> <div class="item-1"></div> <div class="item-2"></div> <div class="item-3"></div> </div>css如下：
.box { display: flex; width: 800px;}.box > div { height: 200px;}.item-1 { width: 160px; flex: 2 1 0%; background: #2ecc71;}.item-2 { width: 100px; flex: 2 1 auto; background: #3498db;}.item-3 { flex: 1 1 200px; background: #9b59b6;}得到的结果如下：
主轴上父容器总尺寸为 800px
子元素的总基准值是：0% + auto + 200px = 300px 其中
- 0% 即 0 * 800px = 0宽度 - auto 对应取主尺寸即 100px故剩余空间为 800px - 300px = 500px
伸缩放大系数之和为： 2 + 2 + 1 = 5
剩余空间分配如下：
- item-1 和 item-2 各分配 2/5 各得 200px - item-3 分配 1/5 得 100px各项目最终宽度为：
- item-1 = 0% + 200px = 200px - item-2 = auto + 200px = 300px - item-3 = 200px + 100px = 300px当 item-1 基准值取 0% 的时候 是把该项目视为零尺寸的 故即便声明其尺寸为 160px 也并没有什么用 形同虚设
而 item-2 基准值取 auto 的时候 根据规则基准值使用值是主尺寸值即 100px 故这 100px 不会纳入剩余空间
总结
flex 的缺省值并非是单一属性的初始值 在flex属性取值的缩写中 flex-grow 、 flex-shrink 、flex-basis的缺省值分别为1 、 1 、0% 而不是这三属性分别的默认值0、 1 、auto；
当项目没有设置固定宽度（对于水平的情况 也就是宽度本身是auto的）时 flex-basis如果也是auto 那么flex-basis的使用值就是该项目的内容本身撑起来的宽度（对于水平的情况）。
以上就是本文的全部内容 希望对大家的学习有所帮助 也希望大家多多支持爱蒂网。
来源：爱蒂网
