1.彈性佈局概念：

在 Flexbox 模型中，有三個核心概念：
– flex 項（注：也稱 flex 子元素），需要佈局的元素
– flex 容器，其包含 flex 項
– 排列方向（direction），這決定了 flex 項的佈局方向

2.彈性盒子屬性：

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: 專案的第一行文字的基線對齊。
• stretch（預設值）：如果專案未設定高度或設為auto，將佔滿整個容器的高度。

s