【教將來男友學前端】flexbox 收縮算法（下）

老阿姨手抖，不當心刪掉了文章，再發一次。

前幾天對 flex 的深刻學習，筆者寫了一篇flex的收縮算法文章，文章剛出，就被朋友甩來一道flex題，咋地！要考察我？小題一道我還能不會，哈哈哈！不過我相信確定有人不會這道題，尤爲複雜的flex計算狀況，指定懵。因而這篇文章就誕生了，教你計算flex item的大小。不對，是教將來男盆友噠☺️

找事呢？

就是這道題，先不要看答案，嘗試花3分鐘分析，給出答案，而後再對照下邊的答案。

題目在線：查看在線代碼

正確答案: 左25px, →175px，你作對了嗎？

簡要分析:

• 左：擴張因子1，收縮因子1；
• 右：擴張因子1，收縮因子爲0，不收縮，自由寬度150px；

右不能收縮可擴張，可擴張權值：200 - 150 = 50px， 50 / 擴張因子之和 2 = 25px，左右各擴張25px。

考察點:

• 對 flex 屬性的瞭解程度
• 對 flex item 的計算規則

原本不想講基礎的，但是不說基礎，恐怕沒辦法對這道題進行細緻分析，有些小盆友就算看了我上面的簡要分析，仍是不知因此然。要不咱們就來點MDN文檔吧。

你應該知道的 flex 屬性

題中的flex:

.left {
	flex: 1;
	// …
}
.right {
	flex: 1 0 150px;
	// …
}
複製代碼

flex 單屬性，和三個屬性，你都清楚是什麼嗎，都表明什麼意思嗎？不知道還怎麼作我藍盆友。

咦惹的表情圖

flex的基礎介紹，來自MDN：

/* 基礎屬性 */
flex: auto;
flex: initial;
flex: none;
flex: 2;

/* 一個值, 無單位正數：flex-grow */
flex: 2;

/* 一個值, 寬度/高度: flex-basis */
flex: 10em;
flex: 30px;

/* 兩個值: flex-grow | flex-basis */
flex: 1 30px;

/* 兩個值: flex-grow | flex-shrink */
flex: 2 2;

/* 三個值: flex-grow | flex-shrink | flex-basis */
flex: 2 2 10%;

/* Global values */
flex: inherit;
flex: initial;
flex: unset;
複製代碼

flex 屬性能夠指定1個，2個或3個值。

基礎語法:

• auto 元素會根據自身的寬度與高度來肯定尺寸，可是會伸長並吸取 flex 容器中額外的自由空間，也會縮短自身來適應 flex 容器。這至關於將屬性設置爲 "flex: 1 1 auto"。
• initial 元素會根據自身寬高設置尺寸。它會縮短自身以適應 flex 容器，但不會伸長並吸取 flex 容器中的額外自由空間來適應 flex 容器 。至關於將屬性設置爲"flex: 0 1 auto"。
• none 元素會根據自身寬高來設置尺寸。它是徹底非彈性的：既不會縮短，也不會伸長來適應 flex 容器。至關於將屬性設置爲"flex: 0 0 auto"。

單值語法: 值必須爲如下其中之一:

• 一個無單位數: 它會被看成 flex-grow 的值。
• 一個有效的寬度值: 它會被看成 flex-basis 的值。

雙值語法: 第一個值必須爲一個無單位數，而且它會被看成 flex-grow 的值。第二個值必須爲如下之一：

• 一個無單位數：它會被看成 flex-shrink 的值。
• 一個有效的寬度值: 它會被看成 flex-basis 的值。

三值語法:

• 第一個值必須爲一個無單位數，而且它會被看成 flex-grow 的值。
• 第二個值必須爲一個無單位數，而且它會被看成 flex-shrink 的值。
• 第三個值必須爲一個有效的寬度值， 而且它會被看成 flex-basis 的值。

再來看題中的 flex:

.left {
	flex: 1; 
	// …
}
.right {
	flex: 1 0 150px; 
	// …
}
複製代碼

• flex: 1; 它會被當作 flex-grow: 1;
• flex: 1 0 150px; 它會被當作 flex-grow:1; flow-shrink: 0; flex-basis: 150px;

這裏明白了，之後無論幾個值的flex，你都能一眼看清楚。

複雜的 flex item 到底怎麼計算

針對 flex 的子元素的寬度到底怎麼計算，其實跟 在主軸方向上控制flex子元素的尺寸和伸縮性有關。理解flex子元素如何工做的關鍵是理解有多少東西參與影響flex子元素

• flex-grow
• flex-shrink
• flex-basis

flex item 的基本大小

1. flex-basis設置爲auto嗎，這個flex子元素設置了寬度嗎？若是設置了, flex子元素的大小將會基於設置的寬度.
2. flex-basis 設爲 auto 仍是content (在支持的瀏覽器中)? 若是是auto, flex子元素的大小爲原始大小.
3. flex-basis是不爲0的長度單位嗎？若是是這樣那這就是flex子元素的大小.
4. flex-basis 設爲 0呢? 若是是這樣，則flex子元素的大小不在空間分配計算的考慮以內.

有可用空間嗎

1. 把全部的flex子元素的寬度相加，總和是否小於flex容器的總寬度？若是是這樣，那麼你有多餘空間，flex-grow會發揮做用.
2. 把全部的flex子元素的寬度相加，總和是否大於flex容器的總寬度？若是是這樣，那麼你有溢出空間，flex-shrink會發揮做用.

具體若是發揮做用，請參考筆者的上一篇文章flex收縮算法（一）

空餘空間和溢出空間的其餘處理方式?

• 空間增長到子元素中
• 空間添加到子元素之間或周圍 （對準屬性justify-content）

有個例外：flex: 1 1 0

一個容器，多個子元素，子元素沒有設定寬度的狀況下，flex: 1 1 0; flex子元素的天然大小計算值是0，意味着全部空間都用來爭奪，而且全部flex子元素具備相同的flex-grow值，它們flex子元素每一個都得到相等的空間分配。 最終結果是三個寬度相等的可伸縮 flex子元素。

再來看這道題

請問left和right的寬度分別是多少？

<document> 
    <style type="text/css"> .container{ width: 200px; height: 200px; display: flex; flex-direction: row; align-items: stretch; } .left{ flex: 1; border: 1px solid #ccc; } .right{ flex: 1 0 150px; border: 1px solid #ccc; } </style> 
    <div class="container"> 
        <div class="left"></div> 
        <div class="right"></div>
    </div>
</document>
複製代碼

第一步：分析容器和元素

一個寬度200px的容器，內部兩個子元素，容器設置了 align-items: stretch; 使兩個子元素的高度撐滿容器高度，這個屬性暫時跟寬度不要緊，先無論它。

• 左元素：flex: 1，它會被當作 flex-grow: 1; flex-shrink: 1; flex-basis: auto; 擴張因子1，收縮因子1；
• 右元素：flex: 1 0 150px;，它會被當作 flex-grow: 1; flex-shrink: 0; flex-basis: 150px;：擴張因子1，收縮因子爲0，不收縮，自由寬度150px；

第二步：分析子元素的收縮性

• 左元素能夠伸縮和擴張，沒有自由寬度
• 右元素不能收縮可擴張，自由寬度 150px

第三步：計算可擴張權益值和擴張因子和

擴張權益值：200 - 150 = 50px 擴張因子和：1 + 1 = 2

第四步：計算左右兩個子元素的實際寬度

• 左元素 0 + 50px / 2 * 1 = 25px
• 右元素 150px + 50 / 2 * 1 = 175px

左、右元素各擴張25px，總寬度仍是200px。算完啦，藍盆友，你學會了嗎？

如上內容均爲本身總結，不免會有錯誤或者認識誤差，若有問題，但願你們留言指正，以避免誤人，如有什麼問題請留言，會盡力回答！