flex Box 布局（Flexible Box）旨在提供一種更有效的方式來布局、對(duì)齊和分配容器中項(xiàng)目之間的空間，即使它們的大小是未知的或動(dòng)態(tài)改變的。其主要思想是讓容器能根據(jù)可用空間的大小來動(dòng)態(tài)地改變其元素的寬度和高度。

flex CSS 屬性設(shè)置的是， flex 元素如何根據(jù)其在 flex 容器中的所剩空間來動(dòng)態(tài)拉伸或收縮，它是 flex-grow 、 flex-shrink 、 flex-basis 這三個(gè)屬性的簡化版。

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

單值語法

值必須是如下之一：

• 數(shù)值 number ，那么解釋為 flex: number 1 0
• none 、 auto 、 initial

雙值語法

第一個(gè)值必須是 number ，它會(huì)被解釋為 flex-grow 屬性，第二個(gè)值必須是如下之一：

• 數(shù)值 number ，會(huì)被解釋為 flex-shrink 屬性
• 一個(gè)能夠描述 寬度 的值，例如 10em 、 30% 、 min-content ，會(huì)被解釋為 flex-basis 屬性

三值語法

三個(gè)值的含義：

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

flex 各屬性含義介紹

flex-grow

這個(gè)屬性設(shè)置的是當(dāng)前 flex 元素在 main-size 中的伸縮系數(shù)， main-size 指的是寬度和高度（由 flex-direction 屬性控制），這個(gè)屬性的默認(rèn)值是 0 。

flex 值越大，代表所占的空間越大。如下圖所示， A 、 B 、 C 、 F 這幾個(gè)元素設(shè)置的 flex 值為 1 ，而 D 、 E 元素設(shè)置的 flex 值為 2 ，所以 D 和 E 元素所占的比例就是其它幾個(gè)的兩倍。

flex-shrink

flex-shrink 屬性設(shè)置的是 flex 元素的收縮系數(shù)。假設(shè)所有元素加起來的大小超出了 flex容器，那么就需要用 flex-shrink 這個(gè)屬性來控制如何收縮。它的默認(rèn)值是 1 。

如下圖所示， A 、 B 、 C 、 D 、 E 這幾個(gè)元素的大小超出了容器大小本身， A 、 B 、C 設(shè)置的 flex-shrink 屬性的值為 1 ， D 和 E 屬性設(shè)置的值是 2 ，那么 D 和 E 這兩個(gè)元素的大小會(huì)更小一點(diǎn)，這兩個(gè)收縮的會(huì) 更厲害 一點(diǎn)。

flex-basis

這個(gè)屬性設(shè)置的是一個(gè) flex 元素的 初始大小 。它可以用以下幾種值填充：

（1）寬度

flex-basis: 10em; flex-basis: 3px; flex-basis: auto; 復(fù)制代碼

auto 是 flex-basis 的默認(rèn)值

（2）內(nèi)置調(diào)節(jié)大小的關(guān)鍵字

flex-basis: fill; flex-basis: max-content; flex-basis: min-content; flex-basis: fit-content; 復(fù)制代碼

（3）根據(jù)內(nèi)容自動(dòng)調(diào)節(jié)大小

flex-basis: content; 復(fù)制代碼

（4）全局值

flex-basis: inherit; flex-basis: initial; flex-basis: unset; 復(fù)制代碼

flex 屬性常用值

flex: 0 auto

flex: 0 auto 等同于 flex: initial ，也是 flex: 0 1 auto 的簡寫表達(dá)。它根據(jù)元素自身的width 或 height 屬性來調(diào)節(jié)元素大小。

當(dāng)還剩余一些空閑空間時(shí)，它使 flex 元素呈現(xiàn)的是固定大小的樣式；當(dāng)沒有足夠的空間時(shí)，它允許它收縮到最小。 auto 邊距可用于根據(jù)主軸來對(duì)齊元素。

flex: auto

flex: auto 等同于 flex: 1 1 auto ，它根據(jù)元素的 width 或 height 屬性調(diào)整元素的大小，但是其非常靈活，以便讓它們吸收沿主軸的任何額外空間。

flex: none

flex: none 等同于 flex: 0 0 auto 。它根據(jù) width 和 `height 來調(diào)節(jié)元素大小，但是完全不靈活。

參考

• A Complete Guide to Flexbox
• flex
• flex

:heart::heart::heart:

最后我想說，如果這篇文章對(duì)你有幫助，那就請(qǐng)你點(diǎn)擊下方鏈接去了解一下。

前端30K面試準(zhǔn)備，最完整面試真題分享！

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。