深入了解 Flex 屬性
你有沒(méi)有想過(guò) CSS 中的 flex屬性如何工作?它是 flex-grow，flex-shrink和flex-basis的簡(jiǎn)寫。開(kāi)發(fā)中最常見(jiàn)的寫法是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)寫，默認(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ì)這樣寫：
- .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)寫屬性
當(dāng)你需要設(shè)置grow、shrink和basis時(shí)，最好使用flex屬性來(lái)實(shí)現(xiàn)這個(gè)目的。
根據(jù) CSS 規(guī)范：
建議開(kāi)發(fā)者使用 `flex` 簡(jiǎn)寫來(lái)控制靈活性，而不是直接使用它的普通屬性，因?yàn)楹?jiǎn)寫的可以正確地重置任何未指定的組件以適應(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
像上面這樣的布局， 我們可以這樣寫：
- .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;
- }
本文轉(zhuǎn)載自微信公眾號(hào)「 大遷世界」，可以通過(guò)以下二維碼關(guān)注。轉(zhuǎn)載本文請(qǐng)聯(lián)系****公眾號(hào)。
