關於flex-shrink計算：再深刻一點點

引子

有關於 flex-shrink，flex-grow 屬性，是如何計算的，前人已經有了不少總結，本篇是在本人學習flex過程當中遇到問題後，再進行思考，對這兩個屬性的進一步拓展。

前人總結的計算公式

首先看一下主要的HTML結構：

<section class='container'>
	<div class='item'></div>
    <div class='item'></div>
    <div class='item'></div>
</section>
複製代碼

再看一下主要的LESS設置：

.container{
    dispaly: flex;
    flex-basis: 600px;
    height: 100px;
    .item{
        &:nth-child(1){
            flex-shrink: 1;
            flex-basis: 200px;
        }
        &:nth-child(2){
            flex-shrink: 3;
            flex-basis: 600px;
        }
        &:nth-child(3){
            flex-shrink: 1;
            flex-basis: 400px;
        }
    }
}
複製代碼

最終效果圖以下：

根據已有的結論，與效果圖，咱們給出前人的計算公式：

• ：容器的寬度

• ： 容器中第個項目的真實寬度

• ：容器中第個項目通過flex伸縮變化以後最終的寬度

• : 容器中第個項目所佔有的伸縮係數flex-shrink

• : 求和函數，求到的表達式的和

有以上定義以後，便可得出公式：

例如：

同上可有：

padding 與margin

讓咱們稍微改動一下LESS，查看存在 padding 時的盒子的寬度：

.container.padding{
    .item{
        padding: 100px;
        &:nth-child(1){
            flex-shrink: 1;
            flex-basis: 200px;
        }
        &:nth-child(2){
            flex-shrink: 5;
            flex-basis: 800px;
        }
        &:nth-child(3){
            flex-shrink: 1;
            flex-basis: 400px
        }
    }
}
複製代碼

最終的效果圖以下：

仔細觀察能夠發現，加了 padding 以後， padding 值並未受到影響，減少的僅僅是盒子的真實寬度，如圖第二個div的寬度徹底由 padding 組成：

由此特性便可推導出新的特性：

• : 容器中第個項目的盒子寬度（），由真實寬度加上全部邊距組成

因而有新公式：

咱們帶入計算可有：

同理有：

誒，等一下，好像有哪裏不對？？？和顯示的數值不太同樣。第一個盒子，明明是175px，第二個盒子，明明是100px，如今須要講講下一個特性

min-width 對 flex-shrink 的影響

在寫文檔以前曾有過這樣的一段LESS設置：

.container.min-width{
    .item{
        flex-basis: 600px;
        &:nth-child(1){
            flex-shrink: 1;
        }
        &:nth-child(2){
            flex-shrink: 3;
            min-width: 150px;
        }
        &:nth-child(3){
            flex-shrink: 2;
        }
    }
}
複製代碼

獲得的效果圖以下：

此時第一個盒子能夠推算出：

能夠推出，在min-width被觸發的時候，被觸發的項目的flex-shrink的值應該爲0，計算項目的總寬度時，觸發min-width的項目寬度值，取爲min-width屬性值

咱們能夠嘗試上面獲得的結論去計算剛剛的padding，因爲padding不會受到影響，因此盒子的最小寬度只能是100px，而那時候min-width被觸發了，此時min-width爲0：

計算公式終於正確了！

其實咱們對以前錯誤的計算方式這樣看（即，flex-shrink形變後的項目的寬度由各個邊距的寬度加上項目形變後的真實寬度）：

這樣計算第二個項目時就能發現問題所在：

項目的真實寬度width屬性值在通過形變以後竟然變成了負值，這顯然是不正確的。因此可推導出flex-shrink的變化，最多隻可以使得項目的width的值與min-width一致。

結論

綜上所述，咱們最後能夠來一個終極公式了：

• ：容器的寬度

• ： 容器中第個項目的真實寬度，width、flex-basic屬性決定

• : 容器中第個項目的盒子寬度（），由真實寬度加上全部邊距組成

• ：容器中第個項目通過flex伸縮變化以後最終的寬度，咱們要求的值

• : 容器中第個項目所佔有的伸縮係數flex-shrink

• : 求和函數，求到的表達式的和

• : 描述min-width被觸發的特殊狀況，當flex-shrink形變後的某一項計算獲得的width === min-width時，該項的flex-shrink變成0，也變成min-width，每個項目將從新計算

有公式：

結語

囉裏囉唆講了這麼多，但願有看客能理解其中的意思。若有不合理之處還望指正。flex-grow的計算與flex-shrink十分類似，其特殊的地方應該在max-width值的設置處。

參考

• 深刻理解 flex-grow、flex-shrink、flex-basis

• 關於flex-shrink如何計算的冷知識

• flex規範