圖解 Flexbox

本文圖片、部分翻譯來自原文 How Flexbox works — explained with big, colorful, animated gifs

屬性 #1 display: flex

示例如下

上面4個 div 預設為 display: block

我們給其父級容器新增

#container {
  display: flex;
}

其實把每個 div 添加了一個 flex context (彈性上下文)

屬性 #2 Flex Direction

一個 Flexbox 的容器有兩個軸：主軸 交叉軸。如下：

預設情況下容器中的每個元素都會沿著主軸自左向右一次排列。所以容器設定為 display: flex 後所有的 div 會排列在一行上

但是 Flex-direction 屬性可以讓主軸旋轉，如下：

注意： flex-direction: column 並不是把 div 從主軸移動到交叉軸上，而是讓主軸從水平變為垂直

flex-direction 還有兩者值： row-reverse

屬性 #3 Justify Content

justify-content 用來控制元素在主軸上的對齊方式

先深入理解下主軸和交叉軸的區別。首先設定為 flex-direction: row

#container {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
}

justify-content 有5個可選值：

1. flex-start
2. flex-end
3. center
4. space-between
5. space-around

space-between 會使每個 div 之間產生相同的小的間隔，但在 div 和容器之間沒有間隔

space-around 會在每個 div 兩側各產生一個相同的間隔，即容器和最外層的 div 之間的間隔剛好是兩個 div 間隔的一半

注意： justify-content 是沿著主軸工作的。 flex-direction 是改變的主軸方向的。

屬性 #4 Align Items

justify-content 是沿著主軸工作的，而 align-items 則是沿著交叉軸工作。

首先重置 flex-direction: row 兩個軸展示如下：

align-items 有5個可選值：

1. flex-start
2. flex-end
3. center
4. stretch
5. baseline

看看後兩個，其中每個 div 中的數字都包含在一個 p 標籤中

align-items: stretch 時每個 div 都會充滿交叉軸

align-items: baseline 時按照 p 標籤的底部對齊

注意： align-items: stretch 時每個 div 的 height 必須為 auto 否則 height 屬性會覆蓋 stretch 的效果

align-items: baseline 時如果 div 內沒有 p 標籤或者 div 內沒有文字或者子標籤內沒有文字將按照每個 div 的底部對齊。如下：

進一步理解主軸和交叉軸的區別，把 justify-content 和 align-items 合在一起，看看在 flex-direction 兩種值下的效果

flex-direction: row 時每個 div 按照水平主軸排列

flex-direction: column 時每個 div 按照垂直主軸向下排列

屬性 #5 Align Self

align-self 可以手動設定一個元素的對齊方式

它會針對一個 div 覆蓋掉 align-items 屬性，因為容器內元素屬性都為 auto , 所以每個 div都會使用父容器的 align-items 屬性值

#container {
  align-items: flex-start;
}
.square#one {
  align-self: center;
}
/* 只有 #one 這個 div 會居中 */

將前兩個 div 設定 align-self 屬性，後兩個使用 align-items: center 和 flex-direction: row 如下