弹性容器中 子元素的flex属性介绍

首先明确一点，flex属性是flex-grow，flex-shrink和flex-basis的缩写。

关于flex属性值为none、auto、数字等时的默认值，详见https://www.cnblogs.com/chris-oil/p/5430137.html

flex-grow：指定了容器剩余空间多余时候的分配规则，默认值是0，多余空间不分配。

flex-shrink：指定了容器剩余空间不足时候的分配规则，默认值是1，空间不足要分配。

flex-basis：则是指定了固定的分配数量，默认值是auto

接下来，将通过一个示例对以上3个属性做出介绍：

// 请实现如下问题...

范张，范鑫和范旭每人100万固定家产，范帅和范哥则各20万保底家产。如果范闲归西那天家产还有富余，范帅和范哥按照3:2比例分配；如果没有剩余财产，则范张，范鑫和范旭三位兄长按照2:1:1的比例给两人分别匀出20万保底家产。

HTML结构如下：

<div class="container">
    <item clas="zhang">范张</item>
    <item clas="xin">范鑫</item>
    <item clas="xu">范旭</item>
    <item clas="shuai">范帅</item>
    <item clas="ge">范哥</item>
</div>

根据题目初步分析：

当有家产富裕时，前3者 并不参与家产富裕部分的再分配(flex-grow均为默认值0)， 只有后2者参与再分配(flex-grow值分别为3、2)。

同理，当有家产捉襟见肘时， 只有前3者要从各自分得的资产中 按比例抽取部分所得 给后2者(flex-shrink值分别为2、1、1)，后2者并不需要抽取资产(flex-shrink均为0)。

CSS代码如下：

.container {
    /* 范闲：来，家产分配开始了~ */
    display: flex;  
}
.zhang {
    /* 老大不会争夺多余财产，但是会在财产不足时候分出老二老三分出的2倍的财产，这是作为老大应有的姿态 */
    flex: 0 2 100px;    
}
.xin,
.xu {
    /* 老二和老三不会争夺多余财产，但是会在财产不足时候分出部分财产，照应老四和老幺 
    这里也可以直接写成：flex: 100px*/
    flex: 0 1 100px;    
}
.shuai {
    /* 老四会争夺多余财产，且会在财产不足时候分出财产，感谢哥哥们的照顾，不过我的保底家底也小 */
    flex: 3 0 20px;    
}
.ge {
    /* 老五会争夺多余财产，不过比例比哥哥少一点，且会在财产不足时候分出财产，感谢哥哥们的照顾 */
    flex: 2 0 20px;    
}

 ——————————————————————— 分界线 —————————————————————————————

我的总结：

此处以flex容器(container )的临界宽度(100+100+100+20+20)，即340px进行分析。此时五个子元素中，前3个刚好均满足最大值100px，后2个也刚好均满足最小值20px。

当家族生意红火，假如container = 350px > 340px时，会在保证临界分配方案的前提下，将 多出的10px 财产以3:2的比例 二次再分配 给后2个子元素，最终的分配结果为(100+100+100+26+24)。

当家族生意江河日下，假如container = 300px < 340px时，此时无法实施临界分配方案。会先为前3个子元素平分总资产，之后三者 再 从各自资产中以2:1:1的比例抽出 共计40px(20+20)，以保证满足后2个子元素。【经测试，如当container = 20px < 40px时，后2者同样都能各分到20px！但前3者也都因为包含内容所以占用宽度。五个子元素总宽度>20px，此时会有部分子元素从container 溢出！】

详见 张鑫旭老师的博客

 

 ——————————————————————— 分界线 —————————————————————————————

关于 flex-basis属性，比较复杂，经过参阅张鑫旭老师的博客，现总结以下几点：

1.在Flex布局中，请使用flex-basis代替width属性，二者不要同时使用。
2.在Flex布局中，子项设置width是没有直接效果的。width只是flex-basis为auto时候间接生效，其余时候使用优先级更高的flex-basis属性（可以理解为覆盖）。
3.flex子项元素尺寸还与元素内容自身尺寸有关，即使设置了flex-basis属性值。
4.flex-basis默认作用在content box上，IE11会忽略box-sizing。
5.flex-basis使用得当可以实现类似min-width/max-width的效果。

我希望一个列表中的每一项最小宽度是100像素，尽可能填满整个容器，该如何实现？

无需使用min-width属性，可以试试下面的 CSS代码：

by-zhangxinxu {
    display: flex;
    flex-wrap: wrap;
}
item-zxx {
    flex-basis: 100px;
    flex-grow: 1;
}

HTML代码：

<by-zhangxinxu>
    <item-zxx>最小100px，总是填满容器。</item-zxx>
    <item-zxx>最小100px，总是填满容器。</item-zxx>
    <item-zxx>最小100px，总是填满容器。</item-zxx>
    <item-zxx>最小100px，总是填满容器。</item-zxx>
</by-zhangxinxu>

结果：