起因

工作以后由于大量使用到了flex布局而碰到了一些尚不清楚的問題，以及一些有意思的特性，在此寫篇博客記錄一下。

flex三個值的含義

眾所周知，flex布局所有的屬性有兩種：一種作用在彈性容器（Flex container）上，一種作用在彈性項目（Flex item）上，而flex就是作用在彈性項目上的屬性。

flex 是 flex-grow、flex-shrink、flex-basis 三個值的簡寫，這個值規定了彈性項目如何伸長或壓縮以適應彈性容器中的可用空間。

flex-grow 定義彈性項目的放大比列，可以接受數字（小數也可以），不接受負值，默認值是 0 。這個值如果為 0 就意味著即使容器內還存在剩余空間，彈性項目也不會放大。

flex-shrink 定義彈性項目的收縮比例，同樣接受數字（小數也可以），不接受負值，默認值是 1 。如果一個彈性項目的 flex-shrink 設為 0 而其他彈性項目的 flex-shrink 值為 1 ，則當彈性容器空間不足時，該彈性項目不會被壓縮，而其他的彈性項目會被等比例壓縮。

flex-basis 定義在分配容器內空間之前，彈性項目占據的主軸空間（不一定是寬度，因為主軸方向可以是縱向的），默認值是 auto 。如果對彈性項目同時設置 flex-basis 和 width ， width 會被忽略。還要注意當主軸是橫向的時候，如果設定了 max-width 或 min-width 會限制彈性項目的寬度。

這里講一下 flex-basis 取值的情況：

• 指定的數值，比如以px、em為單位的數值。
• 百分數，取百分數的話就是相對其父彈性容器的寬或高（取決于主軸方向）來計算，如果包含塊的尺寸未指定（也就是說父元素的尺寸取決于子元素），那么這時候結果和 auto 一樣。
• auto 值的意思是基于彈性項目的 width 或 height 調整大小（根據主軸的橫向或者縱向），如果沒有設置 width 或 height 則根據內容自適應。

設置flex之后的彈性項目如何計算寬度

這里給一個代碼的例子

<div id="content"><div class="box1" style="background-color:red;">A</div><div class="box2" style="background-color:lightblue;">B</div><div class="box3" style="background-color:yellow;">C</div> </div> #content {display: flex;width: 360px; }.box1 {width: 100px;flex: 1 1 0; }.box2 {width: 100px;flex: 1 1 0; }.box3 {width: 100px;flex: 1 1 0; }

由于flex-basis的值為 0 ，所以此時彈性容器的剩余空間為 360px - 0 * 3 = 360px ，由于3個元素都設置了 flex-grow: 1 ，所以剩余空間3個元素所占比例為 1:1:1 ，每個元素的寬度就是 360px / 3 = 120px 。

如果把代碼改一下呢？

#content {display: flex;width: 360px; }.box1 {width: 100px;flex: 1 1 0; }.box2 {width: 100px;flex: 1 1 auto; }.box3 {flex: 1 1 200px; }

此時，彈性容器內剩余寬度為：360px - 0 - 100px - 200px = 60px，3個元素所占剩余空間比例同樣是 1:1:1 。那么寬度分別就是：0 + 20px = 20px ，100px + 20px = 120px ，200px + 20px = 220px 。

對應復雜情況的計算，這里有一個回答寫得不錯：

flex設置成1和auto有什么區別

flex單值、雙值、三值的賦值規則是怎么樣的

單值情況下：

• 一個無單位的數字：它會被當作 flex-grow 的值，flex-shrink 為 1 ，flex-basis 為 0%。
• 一個有效的寬度值：它會被當作 flex-basis 的值，flex-shrink 和 flex-grow 都是 1 。
• 關鍵字：比如 auto，none 這兩個下文會講。

雙值情況下：

第一個值必須是無單位的數字，它會作為 flex-grow 的值；第二個值可以是：

• 一個無單位的數字：它會被當作 flex-shrink 的值，而flex-basis 的值就是 0% 。
• 一個有效的寬度值：它會被當作 flex-basis 的值，flex-shrink 的取值就是 1 。

三值情況下：

第一個和第二個值必須是無單位的數，分別作為 flex-grow，flex-shrink，flex-basis 的值；第三個值可以是有效的寬度值，也可以是 auto 。

flex: 0，flex: 1，flex: auto，flex: none，flex: 0%的區別是什么？

講完了上面的三種賦值方式之后，那么簡寫就變得很容易理解了：

• flex: 0 是 flex: 0 1 0% 的簡寫
• flex: none 是 flex: 0 0 auto 的簡寫
• flex: 1 是 flex: 1 1 0% 的簡寫
• flex: auto 是 flex: 1 1 auto 的簡寫
• flex: 0% 是 flex: 1 1 0% 的簡寫

小結一下：以上就是對 flex 這個屬性取值的梳理，最近一年沒有寫過博客，最近還是要填一下坑的，前端之路且歌且行～

原文地址：https://segmentfault.com/a/1190000016899455

轉載于:https://www.cnblogs.com/lalalagq/p/9907677.html

總結

以上是生活随笔為你收集整理的谈一谈flex布局使用中碰到的一些问题的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。