flex布局

使用display：flex可以使元素变为伸缩容器，伸缩容器的子代是伸缩项目，伸缩项目一律块状化，伸缩项目沿着主轴排列，主轴默认是水平的，可以使用flex-direction改变主轴方向，row水平从左到右（默认），column垂直从上到下，使用flex-wrap控制主轴换行方式，nowrap不换行（默认，盒子会变形），wrap伸缩容器不够自动换行，wrap-reverse 反向换行。使用justify-content控制主轴对齐方式，常用值：flex-start，flex-end，center，space-between（两端对齐，均匀分布），space-evenly（全部均匀分布），space-around（每个伸缩项目自己左右的距离相同）。侧轴是一行的情况下使用align-items对齐，常用值，stretch 如果伸缩项目未设置高度，将占满整个容器的高度（默认），flex-start，flex-end，center，baseline 伸缩项目的第一行文字的基线对齐。侧轴是多行的情况下使用align-content对齐，常用值，stretch，flex-start，flex-end，center，space-between，pace-evenly，space-around。