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