Flex布局-垂直居中并换行显示内容

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 //换行，第一行在下方。
]