Flexbox 佈局教程

Flex 佈局是什麼？

Flex 是 Flexible Box 的縮寫，意爲"彈性佈局"，用來爲盒狀模型提供最大的靈活性。

任何一個容器均可以指定爲 Flex 佈局。

使用 flex 佈局首先要設置父容器 display: flex，而後再設置 justify-content: center 實現水平居中，最後設置 align-items: center 實現垂直居中(須要在肯定height下才能實現)。

#dad {
    height:300px;
    display: flex;
    justify-content: center;
    align-items: center
}

justify-content 和 align-items 是啥？哪裏能夠看出橫向、豎向的語義？是的，flex 的確沒有那麼簡單，這就要從兩個基本概念提及了。

flex 的核心的概念就是 容器 和 軸。容器包括外層的 父容器 和內層的 子容器，軸包括 主軸 和 交叉軸，能夠說 flex 佈局的所有特性都構建在這兩個概念上。

 1、容器

---

 

1.1  父容器

1.1.1  justify-content屬性用於定義如何沿着主軸方向排列子容器。

• flex-start：起始端對齊

• flex-end：末尾段對齊

•  center：居中對齊

•  space-around：子容器沿主軸均勻分佈，位於首尾兩端的子容器到父容器的距離是子容器間距的一半

•  space-between：子容器沿主軸均勻分佈，位於首尾兩端的子容器與父容器相切

 

1.1.2  align-items屬性用於定義垂直方向分配子容器的間距。

•  flex-start：起始端對齊

•  flex-end：末尾段對齊

•  center：居中對齊

•  baseline：基線對齊，這裏的 baseline 默認是指首行文字，即 first baseline，全部子容器向基線對齊，交叉軸起點到元素基線距離最大的子容器將會與交叉軸起始端相切以肯定基線。

•  stretch：子容器沿交叉軸方向的尺寸拉伸至與父容器一致。

 

1.2  子容器

在主軸上如何伸縮：flex

子容器是有彈性的（flex 即彈性），它們會自動填充剩餘空間，子容器的伸縮比例由 flex 屬性肯定。

flex 的值能夠是無單位數字（如：1, 2, 3），也能夠是有單位數字（如：15px，30px，60px），還能夠是 none 關鍵字。子容器會按照 flex 定義的尺寸比例自動伸縮，若是取值爲none 則不伸縮。

雖然 flex 是多個屬性的縮寫，容許 1 - 3 個值連用，但一般用 1 個值就能夠知足需求，它的所有寫法可參考下圖。

•  flex-start：起始端對齊

•  flex-end：末尾段對齊

•  center：居中對齊

•  baseline：基線對齊

•  stretch：拉伸對齊

 

2、軸

---

 

軸 包括 主軸 和 交叉軸，咱們知道 justify-content 屬性決定子容器沿主軸（水平方向）的排列方式，align-items 屬性決定子容器沿着交叉軸（垂直方向）的排列方式

• 從左到右：flex-direction: row

• 從上到下：flex-direction: column

• 從右到左：flex-direction: row-reverse

• 從下到上：flex-direction: column-reverse

 

flex 進階概念（自適應不一樣分辨率）

一、父容器

• 設置換行方式：flex-wrap

  決定子容器是否換行排列，不但能夠順序換行並且支持逆序換行。

 

• nowrap：不換行 

•  wrap：換行

• wrap-reverse：逆序換行

 

• 多行沿交叉軸對齊：align-content

  當子容器多行排列時，設置行與行之間的對齊方式。

•  flex-start：起始端對齊

•  flex-end：末尾段對齊

•  center：居中對齊

•  space-around：等邊距均勻分佈

•  space-between：等間距均勻分佈

•  stretch：拉伸對齊

 

二、子容器

• 設置基準大小：flex-basis

  flex-basis 表示在不伸縮的狀況下子容器的原始尺寸。主軸爲橫向時表明寬度，主軸爲縱向時表明高度。

 

 

• 設置擴展比例：flex-grow

  子容器彈性伸展的比例。如圖，剩餘空間按 1:2 的比例分配給子容器。

 

 

• 設置排列順序：order

  改變子容器的排列順序，覆蓋 HTML 代碼中的順序，默認值爲 0，能夠爲負值，數值越小排列越靠前。

 

flex總結