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）寬度
1 flex-basis: 10em; 2 flex-basis: 3px; 3 flex-basis: auto;
auto 是 flex-basis 的默認值（2）內置調節大小的關鍵字
1 flex-basis: fill; 2 flex-basis: max-content; 3 flex-basis: min-content; 4 flex-basis: fit-content;
（3）根據內容自動調節大小
flex-basis: content;
（4）全局值
1 flex-basis: inherit; 2 flex-basis: initial; 3 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 來調節元素大小，但是完全不靈活。
作者：卷簾依舊
鏈接：https://juejin.cn/post/6844904182156115982
來源：掘金
著作權歸作者所有。商業轉載請聯系作者獲得授權，非商業轉載請注明出處。