Flex计算详解

首先了解一下flex的三个参数：
flex-grow：扩展比例
flex-shrink：是收缩比例
flex-basis：伸缩基准值

----------------------------------------------------------------------
flex-grow例子：
CSS：

.container {
display: flex;
flex-flow: row;
height: 100px;
width: 1000px;
}
.main {
border:1px solid;
flex: 2 1 600px; // 分别是扩展比例，收缩比例，伸缩基准值

}
.left {
border:1px solid;
flex: 3 1 200px;
}
.right {
border:1px solid;
flex: 1 1 100px;
}

 

HTML:

<div class="container">
<nav class="nav left">…</nav>

<section class="main">
…
</section>

<nav class="nav right">…</nav>
</div>

 

首先计算父组件的宽度：1000px
（默认为计算顺序为 main，left，right）
基础值的总和：600px + 200px + 100px = 900px
多余的宽度：1000px - 900px = 100px
根据扩展比例：2：3：1
main扩展: 100 / 6 * 2 = 33.33
left扩展：100 / 6 * 3 = 50
right扩展： 100 / 6 * 1 = 16.66

result：
main：600px + 33.33px
left：200px + 50px
right：100px + 16.66px

--------------------------------------------------------------
flex-shrink例子：

.container {
display: flex;
flex-flow: row;
height: 100px;
width: 900px;
}
.main {
border:1px solid;
flex: 1 3 600px;

}
.left {
border:1px solid;
flex: 1 2 300px;
}
.right {
border:1px solid;
flex: 1 1 200px;
}

 

首先计算父组件的宽度：900px
（默认为计算顺序为 main，left，right）
基础值的总和：500px + 50px + 100px = 900px
权重总和：3 * 600px + 2 * 300px + 1 * 200px = 2600px
多余的宽度：1000px - 900px = 100px
main收缩: 600 * 3 / 2600 * 200 = 138
left收缩：300 * 2 / 2600 * 200 = 46
right收缩： 200 * 1 / 2600 * 200 = 15

result：
main：600px - 138px
left：200px - 46px
right：100px - 15px