flex屬性

---

.flex{
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	flex-wrap: wrap;
}

align-items屬性：定義在交叉軸上的對齊方式

---

對齊方式與交叉軸的方向有關，假設交叉軸從下到上。

align-items: [
	flex-start, //起點/頂部對齊；
	flex-end, //終點/底部對齊；
	center, //中點/居中對齊；
	baseline, //專案的第一行文字的基線對齊；
	stretch //預設值：如果專案未設定高度或設為auto，將佔滿整個容器的高度。
]

justify-content屬性：定義專案在主軸上的對齊方式。

---

對齊方式與軸的方向有關，本文中假設主軸從左到右。

justify-content: [
	start/flex-start, //左對齊；
	end/flex-end, //右對齊；
	center,//居中；
	space-between, //兩端對齊，專案之間間隔相等；
	space-around //每個專案兩側的間隔相等，即專案之間的間隔比專案與邊框的間隔大一倍。
]

flex-direction屬性：決定主軸的方向（即專案的排列方向）

---

flex-direction: [
	row, //（預設）：主軸水平方向，起點在左端；
	row-reverse, //主軸水平方向，起點在右端；
	column, //主軸垂直方向，起點在上邊沿；
	column-reverse //軸垂直方向，起點在下邊沿。
]

flex-wrap屬性：定義換行情況

---

預設情況下，專案都排列在一條軸線上，但有可能一條軸線排不下。

flex-wrap: [
	nowrap, //（預設）：不換行；
	wrap, //換行，第一行在上方；
	wrap-reverse //換行，第一行在下方。
]