『前端面試100問』之彈性盒子中 flex: 0 1 auto 表示什麼意思

flex 語法簡介

flex Box 佈局（Flexible Box）旨在提供一種更有效的方式來佈局、對齊和分配容器中項目之間的空間，即便它們的大小是未知的或動態改變的。其主要思想是讓容器能根據可用空間的大小來動態地改變其元素的寬度和高度。

flex CSS 屬性設置的是，flex 元素如何根據其在 flex 容器中的所剩空間來動態拉伸或收縮，它是 flex-grow、flex-shrink、flex-basis 這三個屬性的簡化版。

其語法格式有單值、雙值、三值三種語法格式。

單值語法

值必須是以下之一：

• 數值 number，那麼解釋爲 flex: number 1 0
• none、auto、initial

雙值語法

第一個值必須是 number，它會被解釋爲 flex-grow 屬性，第二個值必須是以下之一：

• 數值 number，會被解釋爲 flex-shrink 屬性
• 一個可以描述寬度的值，例如 10em、30%、min-content，會被解釋爲 flex-basis 屬性

三值語法

三個值的含義：

• 第一個 number 表示 flex-grow
• 第二個 number 表示 flex-shrink
• 第三個描述寬度的值表示 flex-basis

flex 各屬性含義介紹

flex-grow

這個屬性設置的是當前 flex 元素在 main-size 中的伸縮係數，main-size 指的是寬度和高度（由 flex-direction 屬性控制），這個屬性的默認值是 0。

flex 值越大，表明所佔的空間越大。以下圖所示，A、B、C、F 這幾個元素設置的 flex 值爲 1，而 D、E 元素設置的 flex 值爲 2，因此 D 和 E 元素所佔的比例就是其它幾個的兩倍。

flex-shrink

flex-shrink 屬性設置的是 flex 元素的收縮係數。假設全部元素加起來的大小超出了 flex 容器，那麼就須要用 flex-shrink 這個屬性來控制如何收縮。它的默認值是 1。

以下圖所示，A、B、C、D、E 這幾個元素的大小超出了容器大小自己，A、B、C 設置的 flex-shrink 屬性的值爲 1，D 和 E 屬性設置的值是 2，那麼 D 和 E 這兩個元素的大小會更小一點，這兩個收縮的會更厲害一點。

flex-basis

這個屬性設置的是一個 flex 元素的初始大小。它能夠用如下幾種值填充：

（1）寬度

flex-basis: 10em;      
flex-basis: 3px;
flex-basis: auto;
複製代碼

auto 是 flex-basis 的默認值

（2）內置調節大小的關鍵字

flex-basis: fill;
flex-basis: max-content;
flex-basis: min-content;
flex-basis: fit-content;
複製代碼

（3）根據內容自動調節大小

flex-basis: content;
複製代碼

（4）全局值

flex-basis: inherit;
flex-basis: initial;
flex-basis: unset;
複製代碼

flex 屬性經常使用值

flex: 0 auto

flex: 0 auto 等同於 flex: initial，也是 flex: 0 1 auto 的簡寫表達。它根據元素自身的 width 或 height 屬性來調節元素大小。

當還剩餘一些空閒空間時，它使 flex 元素呈現的是固定大小的樣式；當沒有足夠的空間時，它容許它收縮到最小。auto 邊距可用於根據主軸來對齊元素。

flex: auto

flex: auto 等同於 flex: 1 1 auto，它根據元素的 width 或 height 屬性調整元素的大小，可是其很是靈活，以便讓它們吸取沿主軸的任何額外空間。

flex: none

flex: none 等同於 flex: 0 0 auto。它根據 width 和 `height 來調節元素大小，可是徹底不靈活。

參考

• A Complete Guide to Flexbox
• flex
• flex

---

❤️❤️❤️

最後我想說，若是這篇文章對你有幫助，那就請你幫我三個小忙：

1.點個『贊👍🏻』，表示你對這篇文章的承認❤️❤️❤️

2.關注公衆號「我是前端喵」，按期爲你推送精選好文，上下班路上看一看，有用的知識不知不覺就增長了😊😊😊

3.向你的朋友推薦公衆號「我是前端喵」，一塊兒進步吧🌞🌞🌞