1.添加盒模型
display:flex;
2.justify-content
设置了盒模型之后，默认左对齐。如果想要改变对齐方式，就设置 justify-content
-
flex-start：默认值。项目位于容器的开头。让子元素从父元素的左边开始对齐
-
flex-end：项目位于容器的结尾。让子元素从父元素的右边开始对齐
-
center：项目位于容器的中心。让资源数集中在中间
-
space-between：项目位于各行之间留有空白的容器内。让空白部分分布在子元素两侧
-
space-around：让子元素左右对齐，剩余空白部分平均分布于子元素中间
-
initial：设置该属性为它的默认值。
-
inherit：从父元素继承该属性。
3.flex-flow
flex-flow是flex-direction和flex-wrap的综合体。
flex-direction 表示的是盒模型的方向，默认是横向排列，它有四个值：row，row-reverse，column，column-reverse
row：横向从左向右排列
row-reverse：横向从右向左排列
column：纵向从上向下排列
column-reverse：纵向从下向上排列
flow-wrap 表示的是子元素溢出时的显示方式，默认是压缩显示。它有三个值：wrap,nowrap,wrap-reverse
wrap：表示的是换行显示
nowrap：表示的是压缩在一行显示，默认值
wrap-reverse：表示的是反向换行显示
flex-flow的可选值有7个，包括flex-direction和flow-wrap的所有值
4.flex-grow
flow-grow 是在盒模型的子元素中添加，它表示的是该子元素占据空白空间的比例值，用当前元素的flow-grow值占据所有子元素和的比列。
默认值为0，表示子元素并不会占据剩余空间
列如：如果有两个子元素，他们的flow-grow 值为2、2，那么他们占据的空间就分别为2/4，2/4；如果有两个子元素，他们的flow-grow 值为1、2，那么他们占据的空间就分别为1/3，2/3；
5.flex-shrink
flow-shrink 是在盒模型的子元素中添加，它表示的是当空间不够时，该子元素收缩值。比例值计算：当前元素的shrink值 / 所有兄弟shrink值的和
默认值为 1 ，表示子元素中所有空间不够的值由子元素平摊；shrink 为 0 表示这个元素不收缩；
当所有子元素的值都为0的时候，表示当空间不够时，内容会溢出
总结：flex 是flex-grow和flex-shrink的结合体，表示子元素占据父元素剩余空间的比例值。
注：这个用的比较多。对于现在很多元素是动态从后台获取的，不能确定数量，这样通过flex设置可以动态设置所有元素的宽度。
6.align-item
align-item 是在父元素中添加，设置子元素在纵轴上的对齐方式，值有：center、stretch、flex-start、flex-end、baseline。
center：设置子元素在纵轴上居中对齐；
stretch：设置子元素在纵轴上拉伸，这个是默认值；注：一般如果这个值设置之后不起效果的话，有可能是设置了高度；
flex-start：设置子元素在纵轴上上顶对齐
flex-end：设置子元素在纵轴上从下往上对齐
baseline：设置子元素的文本基线对齐
align-self：在子元素中添加，设置单个子元素在纵轴方向上的对齐方式，center、stretch、flex-start、flex-end、baseline的基础上再加一个auto
