Flex是Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性
设置Flex布局也很简单直接css中，设置它的 display:flex
1.flex-direction 容器内元素排列方向
row ：从左至右
row-reverse ：从右至左
column：从上到下
column-reverse：从下到上
2.flex-wrap:容器内的元素换行
nowrap 不换行
wrap 换行
wrap-reverse 反向换行
3.justify-content 容器内元素在主轴的对齐方式
flex-start 左对齐
flex-end 右对齐
center 居中对齐
space-between 等距对齐（两端对齐，空白分配在元素中间）
space-around 效果同上，但是两边留白
4.align-items 定义容器内元素在纵轴上，如何排列以及处理空白部分
stretch 如果容器内元素未设置高度，则默认元素高度为容器高度
flex-start 容器的纵轴上部对齐
flex-end 容器的纵轴下部对齐
center 在容器的纵轴中部对齐
baseline 如果容器中的元素中有文字，则按文字底部对齐
5.align-content 个人暂时没理解
6.flex-grow 设置这个属性可以将元素按比例放大，默认是0
7.flex-shrink 设置这个属性可以将元素按比例缩小，默认是0
8.flex-basis 我感觉和width差不多
9.align-self 属性和algin-item是一样的，不过是基于align-item父级元素进行重写