flex无敌居中

初学flex，记录一下flex实现无敌居中（水平垂直居中），实现某个div内部的元素水平垂直居中（样式写在该div上）

	display: flex;
	flex-direction: column;	//主轴的方向，如果内部只有一个元素，那么这个值可以任意取（默认为row）
	align-items: center;	//定义项目在交叉轴上如何对齐
	justify-content: center;//定义项目在主轴上的如何对齐

flex-direction决定的就是主轴的方向,flex是分主轴和交叉轴的，可以理解为数学上的平面坐标系的x轴和y轴，将x轴作为主轴，y就是交叉轴，只不过这个主轴可以朝着上下左右四个方向

align-items:定义项目在交叉轴上如何对齐

justify-content:定义项目在主轴上的如何对齐

为什么说内部只有一个元素时flex-direction可以任意取呢，因为当主轴在水平方向上时，justify-content: center实现水平居中，align-items实现垂直居中，反过来当主轴在竖直方向上时，justify-content: center实现的是竖直居中，而align-items实现水平居中，所以不论如何都是实现了完全居中。所以，align-items和justify-content完全可以通过主轴方向的变化来实现作用交换。

顺便记录属性的取值范围：
align-items：
flex-start：交叉轴的起点对齐。
flex-end：交叉轴的终点对齐。
center：居中
baseline: 项目的第一行文字的基线对齐。（不管内部元素高度多高，都按照第一行文字对齐）
stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。

justify-content:
flex-start（默认值）：左对齐
flex-end：右对齐
center： 居中
space-between：两端对齐，项目之间的间隔都相等。
space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。