A. flex-direction: 方向有無reverse 決定數字列從左或右開始，欄從上或下開始

1
2
3
1
2
3
1
2
3
1
2
3

row; 列靠左（頭）| row-reverse; 列靠右（尾）| column; 欄靠上（頭）| column-reverse; 欄靠下（尾）

B. justify-content: 水平對齊位置 (列左右.欄上下)

1
2
3
1
2
3
1
2
3
1
2
3

row; flex-start; 列靠左（頭）｜ row; flex-end; 列靠右（尾）｜ row-reverse; flex-start; 列靠右（頭）｜ row;-reverse; flex-end; 列靠左（尾）

1
2
3
1
2
3
1
2
3
1
2
3

column; flex-start; 欄靠上（頭）｜ column; flex-end; 欄靠下（尾）｜ column-reverse; flex-start; 欄靠下（頭）｜ column-reverse; flex-end; 欄靠上（尾）

C. align-items: 垂直對齊方式（列上下.行左右）根據flex-direction的row或colunm是正排序或者反排序， 調整頭尾。

1
2
3
1
2
3
1
2
3
1
2
3

row; flex-start; （頭，左上）｜ row; flex-end; （尾，左下）｜ row-reverse; flex-start; （頭，右上）｜ row-reverse; flex-end; （尾，右下）

1
2
3
1
2
3
1
2
3
1
2
3

column; flex-start; （頭，左上）｜ column; flex-end; （尾，右上）｜ column-reverse; flex-start; （頭，左下） ｜ column-reverse; flex-end; （尾，右下）

B. justify-content center / space

1
2
3
1
2
3
1
2
3
1
2
3

x 軸置中.分散對齊 flex-direction: row; justify-content: center;｜ space-around; ｜ space-between; ｜ space-evenly;

1
2
3
1
2
3
1
2
3
1
2
3

y 軸置中.分散對齊 flex-direction: column; justify-content: center;｜ space-around; ｜ space-between; ｜ space-evenly;

C. align-items: center / stretch

1
2
3
4
1
2
3
4

center 置中 | 若無設定高度，align-items預設stretch至元素垂直最高度。

D. flex-wrap:

2
3
4
5
2
3
4
5
2
3
4
5

預設nowrap | wrap: 當內容太多時，換到下一行 | wrap-reverse: 換行時元素排序反轉

E. align-content: 多行內容的垂直.水平對齊+分散對齊

flex-start; 整段靠頭(上) | flex-end; 整段靠尾(下) | center; 整段置中 | stretch; 整段分散對齊 | space-around; 均分整段.上下留白 | space-between; 均分整段上下留白，但不含最上與最下

1
2
3
4
5
6
7
8
9
10
11
1
2
3
4
5
6
7
8
9
10
11
1
2
3
4
5
6
7
8
9
10
11
1
2
3
4
5
6
7
8
9
10
11
1
2
3
4
5
6
7
8
9
10
11
1
2
3
4
5
6
7
8
9
10
11