CSS —— 盒子模型（Flexbox 佈局方式）

目錄

傳統盒模型

Flexbox 佈局方式

Flexbox 核心概念

Flex 容器屬性

• flex-direction ：項目元素排列的方向

• flex-wrap ：項目元素排列方式

• justify-content ： 項目在主軸上的對齊方式

• align-items ：項目在交叉軸上的對齊方式

• align-content ：多行項目的排列方式

Flex 項目屬性

• order ：項目的排列順序

• flex-grow ： 項目的放大比例

• flex-basis ：項目在主軸上的空間

• align-self ：項目的對齊方式

---

正文

---

• 傳統盒模型 ：通過 display、float等參數來配置具體的佈局，這種方式代碼簡單，但是在處理實現諸如垂直居中、彈性寬度和高度等特性時會極爲麻煩。

• Flexbox 佈局方式 ：可以快速的實現上述各種場景，以及更多非常常用的排版需求，例如：

  —  豎排元素
  

  — 元素左側/右側豎向對齊

Flexbox 核心概念

---

• 在進行Flexbox 佈局時，核心的屬性包括容器和項目：

— 容器 ： Flexbox 中外部的容器
— 項目 ： Flexbox 中內部的項目

通過設置容器的參數，來實現內部項目按一定的順序來進行排布：

Flex 容器屬性

---

• 通過設置 Flex 容器的屬性，可以設置容器內各項目的樣式

— flex-direction ：項目元素排列的方向

① 值爲 row： 內部項目從左向右排列

② 值爲 row-reverse ：內部項目反轉橫向排列

③ 值爲 column ：內部項目縱向對齊

④ 值爲 column-reverse ：內部項目反轉縱向對齊

— flex-wrap ：項目元素排列方式
① 值爲 nowrap ： 項目元素不會溢出，也不會自動換行

② 值爲 wrap ： 當項目元素的寬度超出容器的時候，就會自動換行

③ 值爲 wrap-reverse ：子元素溢出容器時會反轉自動換行

— justify-content ： 項目在主軸上的對齊方式

① 值爲 flex-start ：項目從主軸的開始位置對齊

② 值爲 flex-end ： 項目從主軸的結束位置對齊

③ 值爲 center ：項目從主軸的中間開始對齊

④ 值爲 space-between ：各項目之間保持相同的距離進行排布

⑤ 值爲 space-around ：不僅各項目間保持相同的距離，且在兩側也會有一定的距離來保持排列

— align-items ：項目在交叉軸上的對齊方式
① 值爲 flex-start ：交叉軸的起點對齊

② 值爲 flex-end：交叉軸的終點對齊

③ 值爲 center ：交叉軸的中點對齊

④ 值爲 baseline：當交叉軸與行內軸爲同一條時，等價於 flex-start ；其他情況下以項目的第一行文字的基線對齊

⑤ 值爲 stretch （默認值）：如果項目未設置高度或設置爲auto，則沾滿整個容器的高度。（同時收寬度和高度的限制）

— align-content ：多行項目的排列方式（定義多跟軸線的對齊方式，如果項目只有一根軸線，該屬性不起作用）
① 值爲 flex-start ：與交叉軸的起點對齊

② 值爲 flex-end ：與交叉軸的終點對齊

③ 值爲 center ：與交叉軸的中點對齊

④ 值爲 space-between ：與交叉軸兩端對齊，軸線之間的距離平均分佈

⑤ 值爲 space-around ：每根軸線兩側的間隔都相等，所以，軸線之間的間隔比軸線與邊框之間的間隔大一倍

⑥ 值爲 stretch （默認值）：各行平均分配。軸線佔滿整個交叉軸（同時受寬度和高度的影響）

Flex 項目屬性

---

• 通過設置 flex 項目屬性，我們可以控制各項目自己的屬性

— order ：項目的排列順序 （值越小，排列越靠前，默認爲0）

— flex-grow ： 項目的放大比例（默認爲0，即如果有剩餘空間，也不放大）

— flex-shrink ：項目的縮小比例 （默認爲1，即如果空間不足，則項目將縮小）

如果所有的項目 flex-shrink 屬性都爲1，則空間不夠時，都將等比例縮小。如果一個項目的 flex-shrink 屬性爲0，其他項目都爲1，則空間不足時，前者不縮小。

— flex-basis ：項目在主軸上的空間 （默認爲auto，即項目本來的大小），它可以設爲跟 width 或 height 一樣的
值，如 150px ，則項目將佔據固定空間。

— align-self ：項目的對齊方式，通過設置此屬性，可以讓項目和其他項目有不同的排列方式，可覆蓋 align-items 屬性。默認值爲 auto，表示繼承父元素的 align-items 屬性，如果沒有父元素，則等同於 stretch 。此屬性有下圖中的6個值可選擇（除auto外，其他與align-items 可選值相同）。