flex 简写详解
1. flex: flex-grow、flex-shrink 、flex-basis缩写
2. 默认值:
flex: 0 1 auto;
3. flex:none;
flex:0 0 auto;
4. flex:auto;
flex: 1 1 auto;
5. 单一非负数字:该值为flex-grow值,flex-shrink为1,flex-basis为0%
如 flex : 1;
相当于 :
flex-grow: 1; flex-shrink:1; flex-basis: 1;
6. flex取长度或百分比:该值为flex-basis的值,flex-grow为1,flex-basis为1。
如 flex: 0% ;
相当于:
flex-grow: 1; flex-shrink: 1; flex-basis: 0%;
如 flex: 24px;
相当于:
flex-grow: 1; flex-shrink: 1; flex-basis: 24px;
7. flex取两非负数字:分别为flex-grow和flex-shrink的值,flex-basis为0%;
如 flex: 2 3;
相当于:
flex-grow:2; flex-shrink:3; flex-basis:0%
8. flex取一非负数字和一个长度或百分比:分别为flex-grow和flex-basis的值,flex-shrink为1
如 flex: 1 0%;
相当于:
flex-grow: 1; flex-shrink: 1; flex-basis: 0%;
flex-basis取值情况
1. flex-basis规定元素的基准值
2. auto: 首先检索元素主尺寸,若不为auto,则取主尺寸值。若为auto,则取值为content
3. content: 根据元素自动布局
4. 百分比:根据父容器计算,如果父容器未定义尺寸,则计算结果等同故意auto
<style type="text/css"> .parent { display: flex; width: 600px; } .parent > div { height: 100px; } .item-1 { width: 140px; flex: 2 1 0%; } .item-2 { width: 100px; flex: 2 1 auto; } .item-3 { flex: 1 1 200px; } </style>
1. 主轴父容器尺寸:600px
2. 子元素总基准值:0% + auto + 200px =300px;
0% 即0宽度
auto à对应item-2的尺寸,100px
3. 剩余空间:600px-300px = 300px;
4. 放大比例2 + 2 + 1 = 5px;
5. 剩余空间分配,item-1和item-2占2/5,即120px,item-3占1/5,60px
6. 所以
tem-1: 0% + 120px = 120px
item-2: auto + 120px = 220px
item-3: 200px + 60px = 260px;
参考链接1:https://segmentfault.com/a/1190000008942008
参考链接2:http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html