你有沒(méi)有想過(guò) CSS 中的 flex屬性如何工作?它是 flex-grow，flex-shrink和flex-basis的簡(jiǎn)寫(xiě)。開(kāi)發(fā)中最常見(jiàn)的寫(xiě)法是flex：1，它表示 flex 項(xiàng)目擴(kuò)展并填充可用空間。

接下來(lái)，我們來(lái)詳細(xì)看看它表示是什么意思。

flex-grow 屬性

flex-grow屬性定義項(xiàng)目的放大比例，默認(rèn)為0，即如果存在剩余空間，也不放大。flex-grow的值只接受一個(gè)整數(shù)。考慮下面代碼：

<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會(huì)影響寬度或高度，具體取決于flex-direction屬性。對(duì)于以下示例，默認(rèn)的flex-direction的值都是row。

在不使用flex-grow的情況下，flex 項(xiàng)目的寬度將默認(rèn)為其初始寬度。但是，使用flex-grow: 1時(shí)，flex 項(xiàng)目會(huì)平均剩余可用的空間。

你可能想知道，flex 項(xiàng)目之間的空間是如何分配的?嗯，這是個(gè)好問(wèn)題，稍后會(huì)回答。

在下面的圖中，是沒(méi)有使用flex-grow情況。換句話說(shuō)，這是它們的自然大小。

要了解 flex 項(xiàng)目寬度的計(jì)算方式，可以參考下面的公式。

我們來(lái)計(jì)算一下文本是 CSS 的項(xiàng)目寬度。

項(xiàng)目寬度 = (( flex-grow / flex-grow 總個(gè)數(shù)) * 可用空間)+ 初始項(xiàng)目寬度

多個(gè) flex-grow 值

在前面的示例中，所有flex項(xiàng)目的flex-grow值都相同。現(xiàn)在我們把第一項(xiàng)的flex-grow值改為2。這們它又是如何計(jì)算?請(qǐng)注意，本示例的可用空間為498px。

上圖已經(jīng)解釋的很清楚，這里就不在啰嗦了，還不懂的，可以多看幾次。

可以用0作為flex-grow的值嗎?

當(dāng)然可以!因?yàn)閒lex-grow屬性接受整數(shù)值，所以可以使用0,可以防止 flex 項(xiàng)目占用可用空間的一種方式。

這在邊界情況下非常有用，我們希望使 flex 項(xiàng)目保持其初始寬度。

flex-grow 不能讓 flex 項(xiàng)目相等

有一個(gè)常見(jiàn)的誤解，使用flex-grow會(huì)使項(xiàng)目的寬度相等。這是不正確的，flex-grow的作用是分配可用空間。正如在公式中看到的，每 flex 項(xiàng)目的寬度是基于其初始寬度計(jì)算的(應(yīng)用flex-grow之前的寬度)。

如果你想讓項(xiàng)目的寬度相等，可以使用flex-basis，這個(gè)在接下來(lái)的部分會(huì)對(duì)此進(jìn)行講解。

flex-shrink 屬性

flex-shrink屬性定義了項(xiàng)目的縮小比例，默認(rèn)為1，即如果空間不足，該項(xiàng)目將縮小。

考慮下面的例子：中間的項(xiàng)目寬度為300px，flex-shrink的值為```。如果沒(méi)有足夠的空間來(lái)容納所有的項(xiàng)目，則允許項(xiàng)目縮小寬度。

.item-2 { 
    width: 300px; 
    flex-shrink: 1; 
} 

在下列條件下，瀏覽器會(huì)保持項(xiàng)目寬度為300px:

• 所有項(xiàng)目寬度的總和小于包裝器寬度
• 視窗寬度等于或小于項(xiàng)目

下面是項(xiàng)目在不同視口大小下的行為。

如圖所示，在視口寬度大于300px時(shí)，寬度為300px，少于 300px，該項(xiàng)目的寬度就被壓縮成跟視口一樣的寬度。

flex-basis 屬性

flex-basis屬性定義了在分配多余空間之前，項(xiàng)目占據(jù)的主軸空間(main size)。瀏覽器根據(jù)這個(gè)屬性，計(jì)算主軸是否有多余空間。它的默認(rèn)值為auto，即項(xiàng)目的本來(lái)大小。

flex-basis可以設(shè)為跟width或height屬性一樣的值(比如350px，默認(rèn)值為 auto)，則項(xiàng)目將占據(jù)固定空間。

.item-1 { 
    flex-grow: 0; 
    flex-shrink: 0; 
    flex-basis: 50%; 
} 

在上面的例子中，第一項(xiàng)的寬度為50%。這里需要將flex-grow重置為0，以防止項(xiàng)目寬度超過(guò)50%。

如果將 flex-basis 設(shè)置為 100%，會(huì)怎么樣?該項(xiàng)目單獨(dú)占一行，其他項(xiàng)目將換行。

flex 屬性

flex屬性是flex-grow, flex-shrink 和 flex-basis的簡(jiǎn)寫(xiě)，默認(rèn)值為0 1 auto。后兩個(gè)屬性可選。這也說(shuō) flex 項(xiàng)目會(huì)根據(jù)其內(nèi)容大小增長(zhǎng)

(1) flex 項(xiàng)目相對(duì)大小

.item { 
    /* 默認(rèn)值，相當(dāng)于 flex：1 1 auto */ 
    flex: auto; 
} 

flex 項(xiàng)目的大小取決于內(nèi)容。因此，內(nèi)容越多的flex項(xiàng)目就會(huì)越大。

(2) flex 項(xiàng)目絕對(duì)大小

相反，當(dāng)flex-basis屬性設(shè)置為0時(shí)，所有flex項(xiàng)目大小會(huì)保持一致。

.item { 
    /* 相當(dāng)于  flex: 1 1 0% */ 
    flex: 1; 
} 

我喜歡 flex 屬性的幾個(gè)點(diǎn)!

顧名思義，此屬性可以靈活使用其值。請(qǐng)看下面的例子。

(1) 一個(gè)值的情況：

.item { 
    flex: 1; 
} 

上面默認(rèn)對(duì)應(yīng)的值是 1 1 0，也就是 flex-grow: 1，flex-shrink:1, flex-basic: 0。

(2) 兩個(gè)值的情況：

.item { 
    flex: 1 1; 
} 

上面對(duì)應(yīng)的值是 1 1 0，也就是 flex-grow: 1，flex-shrink:1, flex-basic: 0。

(3) 一個(gè)長(zhǎng)度值：

如果 flex 值是一個(gè)長(zhǎng)度值，這會(huì)作用于flex-basis。flex-grow和flex-shrink默認(rèn)為1。

.item { 
    flex: 100px; 
    /* flex: 1 1 100px */ 
} 

(4) 使用無(wú)單位0

有時(shí)，你想把 felx-basis 設(shè)置為 0，你可能會(huì)這樣寫(xiě)：

.item { 
    flex: 0; 
} 

不建議這樣做，因?yàn)樽岄_(kāi)發(fā)人員和瀏覽器感到困惑。你到底是要把 flex-grow 或者 flex-shirnk 設(shè)置為 0，還是將 flex-basis 設(shè)置為 0。

所以，你應(yīng)該添加一個(gè)單位，如px或%。

.item { 
    flex: 0%; 
    /* flex: 1 1 0% */ 
} 

建議使用 flex 簡(jiǎn)寫(xiě)屬性

當(dāng)你需要設(shè)置grow、shrink和basis時(shí)，最好使用flex屬性來(lái)實(shí)現(xiàn)這個(gè)目的。

根據(jù) CSS 規(guī)范：

建議開(kāi)發(fā)者使用 `flex` 簡(jiǎn)寫(xiě)來(lái)控制靈活性，而不是直接使用它的普通屬性，因?yàn)楹?jiǎn)寫(xiě)的可以正確地重置任何未指定的組件以適應(yīng)常見(jiàn)情景。

flex 用例

(1) 用戶頭像

flexbox 的一個(gè)常見(jiàn)用例是用戶組件，頭像和文本內(nèi)容應(yīng)該在同一行。

<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。如果這里不這樣設(shè)置，在某些舊版瀏覽器，圖像看起來(lái)像被壓縮的一樣。除此之外，flex 的優(yōu)先級(jí)高于width屬性(flex-direction: row)或height(flex-direction: column)。

如果我們僅通過(guò)調(diào)整flex屬性來(lái)改變頭像的大小，那么width將被瀏覽器忽略。

.user__avatar { 
    /* width 是 100px, 不是 70px */ 
    flex: 0 0 100px; 
    width: 70px; 
    height: 70px; 
} 

(2) 頭部

如果想讓一個(gè)標(biāo)題填滿所有可用的空間，使用flex: 1非常適合這種情況。

.page-header { 
    display: flex; 
    flex-wrap: wrap;  
} 
 
.page-header__title { 
    flex: 1; 
} 

(3) 輸入框

form { 
    display: flex; 
    flex-wrap: wrap;  
} 
 
input { 
    flex: 1; 
    /* Other styles */ 
} 

(4) 在兩張卡片上對(duì)齊最后一項(xiàng)

假設(shè)CSS grid具有兩列布局。這里的問(wèn)題是日期沒(méi)有對(duì)齊，它們應(yīng)該在同一條線上(紅色那條)。

我們可以使用flexbox做到這一點(diǎn)。

<div class="card"> 
 <img src="thumb.jpg" alt=""> 
 <h3 class="card__title">Title short</h3> 
 <time class="card__date"></time> 
</div> 

通過(guò)設(shè)置flex-direction: column，我們可以在標(biāo)題上使用flex-grow使其填充可用空間，這樣，即使標(biāo)題很短也將日期保留在末尾。

.card { 
    display: flex; 
    flex-direction: column; 
} 
 
/* 第一個(gè)解決方案 */ 
.card__title { 
    flex-grow: 1; 
} 

同樣，無(wú)需使用flex-grow也可實(shí)現(xiàn)，我們使用margin-top: auto

/* 第二個(gè)解決方案*/ 
.card__date { 
    margin-top: auto; 
} 

用例 - 多個(gè) flex 屬性

這里的意思是使用flex-grow或flex-shrink，但值不為1。在本節(jié)中，我們會(huì)探討一些可以將其合并的想法。

(1) footer

像上面這樣的布局， 我們可以這樣寫(xiě)：

.actions { 
    display: flex; 
    flex-wrap: wrap; 
} 
 
.actions__item { 
    flex: 2; 
} 
 
.actions__item.user { 
    flex: 1; 
} 

(2) 擴(kuò)展動(dòng)畫(huà)

我們可以做的一件有趣的事情是在懸停時(shí)為flex項(xiàng)目設(shè)置動(dòng)畫(huà)。這很有用的，下面是一個(gè)簡(jiǎn)單的例子：

.palette { 
    display: flex; 
    flex-wrap: wrap; 
} 
 
.palette__item { 
    flex: 1; 
    transition: flex 0.3s ease-out; 
} 
 
.palette__item:hover { 
    flex: 4; 
} 

(3) 增加的用戶體驗(yàn)

源碼：https://codepen.io/shshaw/pen/EbjvbQ

(4) 當(dāng)內(nèi)容大于其包裝器時(shí)

不久前，我收到一個(gè)讀者的問(wèn)題，他的問(wèn)題如下。如圖所示，兩個(gè)圖像應(yīng)保留在其包裝的邊界內(nèi)。

.wrapper { 
    display: flex; 
} 
 
.wrapper img { 
    flex: 1; 
} 

這里，即使 使用了 flex: 1，圖像仍然會(huì)溢出。根據(jù)CSS規(guī)范：

默認(rèn)情況下，flex 項(xiàng)目不會(huì)縮小到其最小內(nèi)容大小(最長(zhǎng)的單詞或固定大小的元素的長(zhǎng)度)以下。要更改此設(shè)置，請(qǐng)?jiān)O(shè)置min-width或min-height屬性。

上面情況，是由于圖片太大，flexbox不會(huì)縮小圖片。要更改此行為，我們需要設(shè)置以下內(nèi)容：

.wrapper img { 
    flex: 1; 
    min-width: 0; 
}