一、Flex佈局是什麼

Flex佈局是一種現代的、彈性的CSS佈局模型，一般簡稱彈性佈局，
全稱為Flexible Box Layout。它提供了一種更加高效、直觀的方式來設計、排列和對齊容器中的子元素。Flex佈局適用於響應式設計，能夠輕鬆適應不同屏幕大小和設備類型。

二、基本概念

容器默認存在兩根軸：水平的主軸（main axis）和垂直的交叉軸（cross axis）。主軸的開始位置（與邊框的交叉點）叫做main start，結束位置叫做main end；交叉軸的開始位置叫做cross start，結束位置叫做cross end。

項目默認沿主軸排列。單個項目佔據的主軸空間叫做main size，佔據的交叉軸空間叫做cross size。

三、配置：

四、容器的對齊方式屬性

flex-direction
flex-wrap
flex-flow
justify-content
align-items
align-content

4.1 flex-direction

該屬性決定了 Flex 容器中主軸的方向。主軸是 Flex 項目在容器中排列的方向

四個值：

row（默認值）：主軸為水平方向，起點在左端。
row-reverse：主軸為水平方向，起點在右端。
column：主軸為垂直方向，起點在上沿。
column-reverse：主軸為垂直方向，起點在下沿。

4.2 flex-wrap

該屬性定義了 Flex 容器中的 Flex 項目是否應該換行

nowrap：所有 Flex 項目在一行上排列（默認值）。
wrap：Flex 項目可能會換行，多個行堆疊。
wrap-reverse：Flex 項目可能會換行，但是交叉軸的起始和結束位置會互換。

4.3 flex-flow

flex-flow屬性是flex-direction屬性和flex-wrap屬性的簡寫形式，默認值為row nowrap。

.box {
  flex-flow: <flex-direction> <flex-wrap>;
}

4.4 justify-content

該屬性用於控制 Flex 容器中 Flex 項目在主軸上的對齊方式。

flex-start：項目在主軸起始位置對齊。
flex-end：項目在主軸結束位置對齊。
center：項目在主軸居中對齊。
space-between：項目在主軸上均勻分佈，首尾兩個項目分別靠近容器起始和結束邊界。
space-around：項目在主軸上均勻分佈，項目兩側的間隔相等。

4.5 align-items

有主軸 那麼就有交叉軸，該屬性用於控制 Flex 容器中 Flex 項目在交叉軸上的對齊方式。

flex-start：項目在交叉軸起始位置對齊。
flex-end：項目在交叉軸結束位置對齊。
center：項目在交叉軸居中對齊。
baseline：項目在交叉軸上以基線對齊。
stretch：項目在交叉軸上拉伸以適應容器的高度（默認值）。

4.6 align-content

align-content屬性定義了多根軸線的對齊方式。如果項目只有一根軸線，該屬性不起作用

flex-start：在交叉軸起始位置對齊。
flex-end：在交叉軸結束位置對齊。
center：在交叉軸居中對齊。
space-between：在交叉軸上均勻分佈，首尾兩行分別靠近容器起始和結束邊界。
space-around：在交叉軸上均勻分佈，行兩側的間隔相等。
stretch：在交叉軸上拉伸以適應容器的高度。

總結

根據學習與實踐，大致對元素的對齊的方式有了一定了解。

參考

https://css-tricks.com/snippets/css/a-guide-to-flexbox/
https://www.runoob.com/w3cnote/flex-grammar.html