CSS基礎-Flexbox

flexbox 

是一種一維的佈局模型，它給 flexbox 的子元素之間提供了強大的空間分佈和對齊能力。

說 flexbox 是一種一維的佈局，是由於一個 flexbox 一次只能處理一個維度上的元素佈局，一行或者一列。
做爲對比的是另一個二維佈局 CSS Grid Layout，能夠同時處理行和列上的佈局。

 

主軸 flex-direction

 主軸由 flex-direction 定義，能夠取4個值：

• row 行
• row-reverse 反向行
• column 列
• column-reverse 反向列

 交叉軸垂直於主軸，因此若是你的flex-direction (主軸) 設成了 row 或者 row-reverse 的話，交叉軸的方向就是沿着列向下的。

 

---

 Flex 容器

文檔中採用了 flexbox 的區域就叫作 flex 容器。
爲了建立 flex 容器， 咱們把一個容器的 display 屬性值改成 flex 或者 inline-flex。 

完成這一步以後，容器中的直系子元素就會變爲 flex 元素。全部CSS屬性都會有一個初始值，因此 flex 容器中的全部 flex 元素都會有下列行爲：

• 元素排列爲一行 (flex-direction 屬性的初始值是 row)。
• 元素從主軸的起始線開始。
• 元素不會在主維度方向拉伸，可是能夠縮小。
• 元素被拉伸來填充交叉軸大小。
• flex-basis 屬性爲 auto。
• flex-wrap 屬性爲 nowrap。

這會讓你的元素呈線形排列，而且把本身的大小做爲主軸上的大小。若是有太多元素超出容器，它們會溢出而不會換行。
若是一些元素比其餘元素高，那麼元素會沿交叉軸被拉伸來填滿它的大小。

---

 

而後能夠根據狀況，用flex-direction 更改flex主軸的方向。

接着，用flex-wrap：wrap 實現多行Flex容器。若是您的項目太大而沒法所有顯示在一行中，則會換行顯示。

---

 

 

Flex 容器裏->flex 元素上的屬性

爲了更好地控制 flex 元素，有三個屬性能夠做用於它們：

• flex-grow
• flex-shrink
• flex-basis

 

 flex-grow


flex-grow設置了一個flex項主尺寸的flex增加係數。它指定了flex容器中剩餘空間的多少應該分配給該項目。

主尺寸是項的寬度或高度，這取決於flex-direction值。

剩餘的空間是flex容器的大小減去全部flex項的大小加起來的大小。若是全部的兄弟項目都有相同的flex-grow係數，那麼全部的項目將得到相同的剩餘空間，不然將根據不一樣的flex-grow係數定義的比例進行分配。

flex-grow 與其餘的flex屬性flex-shrink和flex-basis一塊兒使用，一般使用flex 速記來定義，以確保全部的值都被設置。

flex-grow 負值無效。省略時默認值爲 1。

 flex-shink

flex-shrink屬性是處理flex元素收縮的問題。
flex 元素僅在默認寬度之和大於容器的時候纔會發生收縮，其收縮的大小是依據 flex-shrink 的值。

給flex-shrink屬性賦予更大的數值能夠比賦予小數值的同級元素收縮程度更大。

flex-basis

 flex-basis 指定了 flex 元素在主軸方向上的初始大小。 該屬性的默認值是 auto 。

若是全部元素都設定了寬度（width）爲100px，因此 flex-basis 的值爲100px。

若是沒有給元素設定尺寸，flex-basis 的值採用元素內容的尺寸。

語法：

/* 指定<'width'> */ flex-basis: 10em; flex-basis: 3px; flex-basis: auto; /* 固有的尺寸關鍵詞 */ flex-basis: fill; flex-basis: max-content; flex-basis: min-content; flex-basis: fit-content; /* 在flex item內容上的自動尺寸 */ flex-basis: content; /* 全局數值 */ flex-basis: inherit; flex-basis: initial; flex-basis: unset;

 

---

 

flex屬性簡寫

你可能不多看到 flex-grow，flex-shrink，和 flex-basis 屬性單獨使用，而是混合着寫在 flex 簡寫形式中。

單值語法: 值必須爲如下其中之一:

• 一個無單位數(<number>): 它會被看成<flex-grow>的值。
• 一個有效的寬度(width)值: 它會被看成 <flex-basis>的值。
• 關鍵字 none，auto或initial.

雙值語法: 第一個值必須爲一個無單位數，而且它會被看成 <flex-grow> 的值。
　　　　  第二個值必須爲如下之一：

• 一個無單位數：它會被看成 <flex-shrink> 的值。
• 一個有效的寬度值: 它會被看成 <flex-basis> 的值。

三值語法:

• 第一個值必須爲一個無單位數，而且它會被看成 <flex-grow> 的值。
• 第二個值必須爲一個無單位數，而且它會被看成  <flex-shrink> 的值。
• 第三個值必須爲一個有效的寬度值， 而且它會被看成 <flex-basis> 的值。

 

---

元素間的對齊和空間分配

justify-content

justify-content屬性用來使元素在主軸方向上對齊，

初始值是flex-start，元素從容器的起始線排列。
flex-end，從終止線開始排列，
center，在中間排列。
space-between，把元素排列好以後的剩餘空間拿出來，平均分配到元素之間，元素之間間隔相等。
space-around，使每一個元素的左右空間相等。

align-items

align-items 屬性可使元素在交叉軸方向對齊。

這個屬性的初始值爲stretch，這就是爲何flex元素會默認被拉伸到最高元素的高度。
實際上，它們被拉伸來填滿flex容器 —— 最高的元素定義了容器的高度。

• stretch
• flex-start
• flex-end
• center