flex布局之flex-grow和flex-shrink如何计算
此文已由作者张含会授权网易云社区发布。
欢迎访问网易云社区，了解更多网易技术产品运营经验。
关于盒模型布局
如何实现两栏布局？
(表格) 流式， 浮动， 定位
如何选择？
流式 > 浮动 > 定位
弹性盒模型FlexBox
容器和项目 .box .item
设置容器flex布局
.box{ display: flex; }// 行内元素
.box{ display: inline-flex; }
容器属性
flex-direction 容器内项目的排列方向（常用）
.box { flex-direction: row | row-reverse | column | column-reverse; }flex-wrap 容器内项目换行方式
.box{ flex-wrap: nowrap | wrap | wrap-reverse; } 注意：有些浏览器不支持flex-flow 是flex-direction和flex-wrap的简写属性
justify-content 容器内项目的水平对其方式 （常用）
.box {
justify-content: flex-start | flex-end | center | space-between | space-around;
}
align-items 容器内项目的垂直对齐方式（常用）
.box { align-items: stretch | flex-start | flex-end | center | baseline ; }align-content 容器内项目的垂直对齐方式，多行生效，单行不生效
.box { align-content: stretch | flex-start | flex-end | center | space-between | space-around ; }
所以需要记住： flex-direction，justify-content，align-items
项目属性
order 排列顺序，越小越靠前，默认为0，可以为负数
.item{ order: <integer>; }flex-grow 扩张比例，默认为0
.item{ flex-grow: <number>; }flex-shrink 收缩比例，默认为1
.item{ flex-shrink: <number>; }flex-basis 分配多余空间前占据的空间
.item { flex-basis: auto | <length>; /* default auto */ }flex 是 flex-grow，flex-shrink，flex-basis 的简写
.item { flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ] } .item{ flex: 1; }align-self 项目的对齐方式，覆盖容器align-items的值
.item { align-self: auto | flex-start | flex-end | center | baseline | stretch; }
项目属性要记住flex
flex-grow 和 flex-shrink如何计算？
flex-grow
对于剩余空间，按照一定的比例分配到项目，以下例子的分配过程如下：
先计算剩余空间1000-200-400-200=200
剩余空间被分成4份，item1占2/4，item2占1/4，item3占1/4
item1共占200+200x2/4=300，item2共占400+200x1/4=450，item3共占200＋200x1/4=250
<div class="box">
<div class="item">100</div>
<div class="item">200</div>
<div class="item">300</div>
</div>
.box {
display: flex;
width: 1000px;
height: 300px;
}
.item{
height: 50px;
}
.item:first-child{
flex: 200px 2 1;
}
.item:nth-child(2){
flex: 400px 1 2;
}
.item:nth-child(3){
flex: 200px 1 1;
}flex-shrink
对于溢出空间，按照一定的比例收缩到项目，以下例子的分配过程如下：
计算溢出空间200+400+200-400=400
注意flex-shrink是收缩比例， 是基于项目宽度的，加入item1的宽度需要收缩n的比例能满足条件，根据设置item2应该收缩2n，item2的收缩比例是n，200xn+400x2n+200xn=400，所以n=1/3(0.33)
item1所占的宽度为200x(1-0.33)=133.33，item2所占宽度为400x(1-2x0.33)=133.33，item3所占空间为200x(1-0.33)=133.33
注意：
如果设置item1的收缩比是1，item2的收缩比是100，item3的收缩比是1，根据公式计算收缩比例是1/1001，item2所占空间为400x(1-100x(1/1001))，约等于0，很明显，如果是0，项目内容是没办法显示的，所以项目的空间不会全部收缩，肯定会预留下项目内容所需要的最小空间，这时候的计算方式会发生变化，假设item2内容所占最小空间为20，所以item2只能收缩掉400-20=380，剩余20按比例收缩在item1和item3。
<div class="box">
<div class="item">100</div>
<div class="item">200</div>
<div class="item">300</div>
</div>
.box { display: flex; width: 400px; height: 300px;
box-sizing: border-box; background: #0f0;
justify-content: space-around;
}
.item{
box-sizing: border-box; height: 50px;
background: #f00; color: #fff;
line-height: 50px;
}
.item:first-child{ flex: 200px 1 1;
}
.item:nth-child(2){ flex: 400px 1 2;
}
.item:nth-child(3){ flex: 200px 1 1;
}更多网易技术、产品、运营经验分享请点击。
相关文章：
【推荐】 JVM运行内存分配和回收
【推荐】 Kylin存储和查询的分片问题
