深入剖析CSS弹性盒模型flex

【4】收缩比率:当伸缩容器的额外空间为负值时，此伸缩项目相对于伸缩容器里其他伸缩项目能收缩的空间比例

CSS Code复制内容到剪贴板

//新版本   
flex-shrink: <number>[默认为1]   
//混合版本   
negative-flex: <number>[默认为0]   
//旧版本无对应属性  

如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。

[注意]伸缩基准值、扩展比率和收缩比率都可以为小数，但不能为负数

【5】伸缩性:是扩展比率、收缩比率和伸缩基准值的缩写

CSS Code复制内容到剪贴板

flex: none => flex: 0 0 auto;   
    flex: auto => flex: 1 1 auto;   
    flex: 0 => flex: 0 1 0%;   
    flex: 1 => flex: 1 1 0%;   
    flex: 0 auto => flex: 0 1 auto;   
    flex: 0 1 => flex: 0 1 0%;  

[注意]当flex为关键字none或存在auto时，flex-basis为auto；若flex只有数字值，则flex-basis为0%；

CSS Code复制内容到剪贴板

//新版本   
flex: none[默认] | [<flex-grow> <flex-shrink>? || <flex-basis>]   
//混合版本   
flex: none[默认] | [<pos-flex> <neg-flex>? || <preferred-size>]   
//旧版本   
box-flex: <number>[默认为0]  

【6】显示顺序: 定义伸缩项目的排列顺序，数值越小，排列越靠前

　　[注意]伸缩容器中的伸缩项目默认显示顺序是遵循文档在源码中出现的先后顺序(HTML文档的DOM结构中的先后顺序)

CSS Code复制内容到剪贴板

//新版本   
order: <number>[默认为0]   
//混合版本   
flex-order: <number>[默认为0]   
//旧版本   
box-ordinal-group: <integer>[默认为1]  

[注意]order的属性值可以是负数，但不能是小数

以上这篇深入剖析CSS弹性盒模型flex就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持软件开发网。