#CSS#搞懂flex布局中常用的各个属性justify-content align-items align-content.....

.container {
	display: flex;  /*通过display设置布局类型为flex*/
	flex-direction: column/row/column-reserve/row-reserve;
	/*该属性规定这个flex容器内的项目排放规则，一列一列来还是一行一行来*/
	flex-wrap: wrap/nowrap/wrap-reverse;
	/*该属性规定容器内的项目排放时是否要换行，如果不换行，那么无论有多少个子项目，都会无视宽度设置，在一行内排放下去。对direction=column也是一样的，当所有项目的高度超过了容器高度可以换行*/
	flex-flow: row wrap;
	/*能够同时设置前两个属性的一个简写属性*/
	justify-content: center/flex-start/flex-end/space-around/space-between;
	/*规定容器内的项目在一行中如何排放，各个项目的宽度之和小于容器宽度的情况下需要用这个属性来调整。其中space-around space-bewteen的区别在于会不会在第一个项目前留点空白。对于column则是各个项目的高度之和小于容器高度。*/
	align-items: center/flex-start/flex-end/stretch/baseline;
	/*规定容器内的项目距离容器顶部的距离，当项目的高度小于容器的高度时有效。对于direction=column时则是当控制项目距离容器左部的距离，当项目的宽度小于容器的宽度。*/
	align-content: space-between/space-around/stretch/center/flex-start/flex-end;
	/*当容器中有多行时，怎么对齐。比如space-between就会把第一行项目紧贴着容器的最上部，最后一行项目紧贴着容器的最下部，中间的平均分散。*/
}

参考W3School 迷糊时就自己跑一下各个属性的结果