我是一個按鈕

flex-direction:row;【方向】|  flex-wrap【彈性包裝】

拉縮視窗看看
1 row
2
3
4

flex-direction:colum;【方向】

1
colum
2
3
4

justify-content【對齊主軸】

1
Flex-start
2
3
1
Flex-end
2
3
1
center
2
3
1
Space-between
2
3
1
Space-around
2
3
1
Space-evenly
2
3

align-item【對齊交叉軸】

1
Flex-start
2
3
1
Flex-end
2
align-self
3
1
center
2
3
1
Stretch
2
3
1
baseline
2
3
1
自動(沒用)
2
3

align-item:baseline; 幾乎只有 row 看得出效果。

1
baseline
2
3

flex-grow 空間分配(2)

1
2
3
4

flex-grow 空間分配(2)

1
2
3
4

flex-shrink 空間不足時分配(2)

1
2
3
4

align-content:Stretch;預設

1
colum
2
3
4
5
6

align-content:flex-start;

1
colum
2
3
4
5
6

 align-content:center;

1
colum
2
3
4
5
6

align-content:flex-end;

1
colum
2
3
4
5
6