你有沒有想過 CSS 中的 flex屬性如何工作？它是 flex-grow，flex-shrink和flex-basis的簡寫。開發中最常見的寫法是flex：1，它表示 flex 項目擴展並填充可用空間。
接下來，我們來詳細看看它表示是什麼意思。
flex-grow 屬性flex-grow屬性定義項目的放大比例，默認為0，即如果存在剩餘空間，也不放大。flex-grow的值只接受一個整數。考慮下面代碼：
<div class="wrapper">
<div class="item item-1"></div>
<div class="item item-2"></div>
<div class="item item-3"></div>
</div>.wrapper {
display: flex;
flex-wrap: wrap;
}
.item {
flex-grow: 1;
}注意：flex-grow會影響寬度或高度，具體取決於flex-direction屬性。對於以下示例，默認的flex-direction的值都是row。
在不使用flex-grow的情況下，flex 項目的寬度將默認為其初始寬度。但是，使用flex-grow: 1時，flex 項目會平均剩餘可用的空間。
你可能想知道，flex 項目之間的空間是如何分配的?嗯，這是個好問題，稍後會回答。
在下面的圖中，是沒有使用flex-grow情況。換句話說，這是它們的自然大小。
要了解 flex 項目寬度的計算方式，可以參考下面的公式。
我們來計算一下文本是 CSS 的項目寬度。
項目寬度 = (( flex-grow / flex-grow 總個數) * 可用空間）+ 初始項目寬度
多個 flex-grow 值在前面的示例中，所有flex項目的flex-grow值都相同。現在我們把第一項的flex-grow值改為2。這們它又是如何計算？請注意，本示例的可用空間為498px。
上圖已經解釋的很清楚，這裡就不在囉嗦了，還不懂的，可以多看幾次。
可以用0作為flex-grow的值嗎？當然可以！因為flex-grow屬性接受整數值，所以可以使用0,可以防止 flex 項目佔用可用空間的一種方式。
這在邊界情況下非常有用，我們希望使 flex 項目保持其初始寬度。
flex-grow 不能讓 flex 項目相等有一個常見的誤解，使用flex-grow會使項目的寬度相等。這是不正確的，flex-grow的作用是分配可用空間。正如在公式中看到的，每 flex 項目的寬度是基於其初始寬度計算的(應用flex-grow之前的寬度)。
如果你想讓項目的寬度相等，可以使用flex-basis，這個在接下來的部分會對此進行講解。
flex-shrink 屬性flex-shrink屬性定義了項目的縮小比例，默認為1，即如果空間不足，該項目將縮小。
考慮下面的例子：中間的項目寬度為300px，flex-shrink的值為```。如果沒有足夠的空間來容納所有的項目，則允許項目縮小寬度。
.item-2 {
width: 300px;
flex-shrink: 1;
}在下列條件下，瀏覽器會保持項目寬度為300px:
下面是項目在不同視口大小下的行為。
如圖所示，在視口寬度大於300px時，寬度為300px，少於 300px，該項目的寬度就被壓縮成跟視口一樣的寬度。
flex-basis 屬性flex-basis屬性定義了在分配多餘空間之前，項目佔據的主軸空間（main size）。瀏覽器根據這個屬性，計算主軸是否有多餘空間。它的默認值為auto，即項目的本來大小。
flex-basis可以設為跟width或height屬性一樣的值（比如350px，默認值為 auto），則項目將佔據固定空間。
.item-1 {
flex-grow: 0;
flex-shrink: 0;
flex-basis: 50%;
}在上面的例子中，第一項的寬度為50%。這裡需要將flex-grow重置為0，以防止項目寬度超過50%。
如果將 flex-basis 設置為 100%，會怎麼樣？該項目單獨佔一行，其他項目將換行。
flex 屬性flex屬性是flex-grow, flex-shrink 和 flex-basis的簡寫，默認值為0 1 auto。後兩個屬性可選。這也說 flex 項目會根據其內容大小增長
flex 項目相對大小.item {
/* 默認值，相當於 flex：1 1 auto */
flex: auto;
}flex 項目的大小取決於內容。因此，內容越多的flex項目就會越大。
flex 項目絕對大小相反，當flex-basis屬性設置為0時，所有flex項目大小會保持一致。
.item {
/* 相當於 flex: 1 1 0% */
flex: 1;
}
我喜歡 flex 屬性的幾個點！顧名思義，此屬性可以靈活使用其值。請看下面的例子。
一個值的情況.item {
flex: 1;
}上面默認對應的值是 1 1 0，也就是 flex-grow: 1，flex-shrink:1, flex-basic: 0。
兩個值的情況.item {
flex: 1 1;
}上面對應的值是 1 1 0，也就是 flex-grow: 1，flex-shrink:1, flex-basic: 0。
一個長度值如果 flex 值是一個長度值，這會作用於flex-basis。flex-grow和flex-shrink默認為1。
.item {
flex: 100px;
/* flex: 1 1 100px */
}
使用無單位0有時，你想把 felx-basis 設置為 0，你可能會這樣寫：
.item {
flex: 0;
}不建議這樣做，因為讓開發人員和瀏覽器感到困惑。你到底是要把 flex-grow 或者 flex-shirnk 設置為 0，還是將 flex-basis 設置為 0。
所以，你應該添加一個單位，如px或%。
.item {
flex: 0%;
/* flex: 1 1 0% */
}
建議使用 flex 簡寫屬性當你需要設置grow、shrink和basis時，最好使用flex屬性來實現這個目的。
根據 CSS 規範：
建議開發者使用 `flex` 簡寫來控制靈活性，而不是直接使用它的普通屬性，因為簡寫的可以正確地重置任何未指定的組件以適應常見情景。
flex 用例用戶頭像flexbox 的一個常見用例是用戶組件，頭像和文本內容應該在同一行。
<div class="user">
<img class="user__avatar" src="shadeed.jpg" alt="" />
<div>
<h3>Ahmad Shadeed</h3>
<p>Author of Debugging CSS</p>
</div>
</div>.user {
display: flex;
flex-wrap: wrap;
align-items: center;
}
.user__avatar {
flex: 0 0 70px;
width: 70px;
height: 70px;
}上面為 頭像 添加了 flex：0 0 70px。如果這裡不這樣設置，在某些舊版瀏覽器，圖像看起來像被壓縮的一樣。除此之外，flex 的優先級高於width屬性（flex-direction: row）或height（flex-direction: column）。
如果我們僅通過調整flex屬性來改變頭像的大小，那麼width將被瀏覽器忽略。
.user__avatar {
/* width 是 100px, 不是 70px */
flex: 0 0 100px;
width: 70px;
height: 70px;
}
頭部如果想讓一個標題填滿所有可用的空間，使用flex: 1非常適合這種情況。
.page-header {
display: flex;
flex-wrap: wrap;
}
.page-header__title {
flex: 1;
}
輸入框form {
display: flex;
flex-wrap: wrap;
}
input {
flex: 1;
/* Other styles */
}
在兩張卡片上對齊最後一項假設CSS grid具有兩列布局。這裡的問題是日期沒有對齊，它們應該在同一條線上(紅色那條)。
我們可以使用flexbox做到這一點。
<div class="card">
<img src="thumb.jpg" alt="">
<h3 class="card__title">Title short</h3>
<time class="card__date"></time>
</div>通過設置flex-direction: column，我們可以在標題上使用flex-grow使其填充可用空間，這樣，即使標題很短也將日期保留在末尾。
.card {
display: flex;
flex-direction: column;
}
/* 第一個解決方案 */
.card__title {
flex-grow: 1;
}同樣，無需使用flex-grow也可實現，我們使用margin-top: auto
/* 第二個解決方案*/
.card__date {
margin-top: auto;
}
用例 - 多個 flex 屬性這裡的意思是使用flex-grow或flex-shrink，但值不為1。在本節中，我們會探討一些可以將其合併的想法。
footer像上面這樣的布局， 我們可以這樣寫：
.actions {
display: flex;
flex-wrap: wrap;
}
.actions__item {
flex: 2;
}
.actions__item.user {
flex: 1;
}
擴展動畫我們可以做的一件有趣的事情是在懸停時為flex項目設置動畫。這很有用的，下面是一個簡單的例子：
.palette {
display: flex;
flex-wrap: wrap;
}
.palette__item {
flex: 1;
transition: flex 0.3s ease-out;
}
.palette__item:hover {
flex: 4;
}
增加的用戶體驗源碼：https://codepen.io/shshaw/pen/EbjvbQ
當內容大於其包裝器時不久前，我收到一個讀者的問題，他的問題如下。如圖所示，兩個圖像應保留在其包裝的邊界內。
.wrapper {
display: flex;
}
.wrapper img {
flex: 1;
}這裡，即使 使用了 flex: 1，圖像仍然會溢出。根據CSS規範：
默認情況下，flex 項目不會縮小到其最小內容大小（最長的單詞或固定大小的元素的長度）以下。要更改此設置，請設置min-width或min-height屬性。
上面情況，是由於圖片太大，flexbox不會縮小圖片。要更改此行為，我們需要設置以下內容：
.wrapper img {
flex: 1;
min-width: 0;
}作者：Ahmad shaded 譯者：前端小智 來源：sitepoint
原文：https://ishadeed.com/article/css-flex-property/
如果你覺得這篇內容對你挺有啟發，邀請你幫我三個小忙：
點個「在看」，讓更多的人也能看到這篇內容
歡迎關注我的3500+sta文章合集https://github.com/qq449245884/xiaozhi，希望可以帶給你點啟發！
想進前端交流群一起探討技術，請在後臺回復「1」或者加微信「qq449245884」