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

:heart::heart::heart:

最后我想說，如果這篇文章對你有幫助，那就請你點擊下方鏈接去了解一下。

前端30K面試準備，最完整面試真題分享！

總結

以上是生活随笔為你收集整理的前端中全部盒子靠左对齐_前端面试一百问之弹性盒子中 flex: 0 1 auto 表示什么意思...的全部內容，希望文章能夠幫你解決所遇到的問題。

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