首先明确一点,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>
结果: