flex 可以說是一次性解決了前端布局的所有的問題（當(dāng)然坯临，并沒有完全解決，要不然也不會(huì)有 grid layout 了）恋昼，以前很難實(shí)現(xiàn)的布局效果在 flex 下簡直不能更簡單看靠，以至于一些其它平臺也開始吸納 flex 的布局思想，也有些開源項(xiàng)目把 flex 的布局方式移植到其它平臺液肌。
本文的示例布局如下：
<div class="container">
<div class="left"></div>
<div class="right"></div>
</div>
flex-grow的計(jì)算方式
當(dāng)子元素寬度的總和 < 父元素寬度挟炬，那么此時(shí)就會(huì)按照flex-grow進(jìn)行伸縮布局。樣式如下：
.container {
width: 600px;
height: 300px;
display: flex;
}
.left {
width: 300px;
flex-grow: 1;
background-color: orange;
}
.right {
width: 200px;
flex-grow: 2;
background-color: pink;
}
可以看到嗦哆，子元素left寬度+right寬度 = 500px辟宗。寬度總和是沒有父元素container的寬度大的，剩余的100px將會(huì)根據(jù)flex-grow平分分配給left和right元素吝秕。left的flex-grow = 1泊脐，right的flex-grow = 2，所以烁峭，剩余空間被分配為3份容客，1份分給left，2份分給right约郁，所以left缩挑、right寬度的計(jì)算公式如下：
left: 300 + ( 600 - ( 300 + 200 ) ) * 1 / 3 = 333.33
right: 200 + ( 600 - ( 300 + 200 ) ) * 2 / 3 = 266.67
flex-shrink的計(jì)算方式
當(dāng)子元素寬度的總和 > 父元素寬度，那么此時(shí)就會(huì)按照flex-shrink進(jìn)行壓縮布局鬓梅。樣式如下：
.container {
width: 600px;
height: 300px;
display: flex;
}
.left {
width: 500px;
flex-grow: 1;
flex-shrink: 2;
background-color: orange;
}
.right {
width: 400px;
flex-grow: 2;
flex-shrink: 1;
background-color: pink;
}
可以看到供置，left和right的寬度總和（900）明顯大于父元素的寬度600，所以需要按照shrink進(jìn)行壓縮绽快。計(jì)算方法是寬度 - 超出寬度 x (權(quán)重寬度 / 總權(quán)重寬度)
// 超出寬度
const overWidth = Math.abs(600 - (500 + 400)) = 300
// 總權(quán)重寬度
const totalWeightWidth = 500 x 2 + 400 x 1 = 1400
// 計(jì)算left寬度 right寬度
const left = 500 - 300 * ((2 * 500 ) / 1400) = 285.71
const right = 400 - 300 * ((1 * 400 ) / 1400) = 314.29
flex-basis
flex-basis的默認(rèn)值為auto芥丧，他指定了 flex 元素在主軸方向上的初始大小。
- flex-basis為0時(shí)坊罢，那么元素初始大小盡可能的小
- flex-basis為auto時(shí)续担，那么元素寬度會(huì)交給flex布局進(jìn)行自適應(yīng)
- flex-basis為指定大小時(shí)，那么元素會(huì)按照這個(gè)初始大小上在flex布局中進(jìn)行改變
flex
flex屬性是flex-grow flex-shrink flex-basic的簡寫活孩，其中后兩個(gè)屬性值可以省略物遇。其默認(rèn)值flex: 0 1 auto
參考
https://zhuanlan.zhihu.com/p/24372279
面試題目
https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/381
https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/382
