box-sizing -- 盒模型

1.添加盒模型 

display:flex;

　

2.justify-content

 设置了盒模型之后，默认左对齐。如果想要改变对齐方式，就设置 justify-content

1. flex-start：默认值。项目位于容器的开头。让子元素从父元素的左边开始对齐

2. flex-end：项目位于容器的结尾。让子元素从父元素的右边开始对齐

3. center：项目位于容器的中心。让资源数集中在中间

4. space-between：项目位于各行之间留有空白的容器内。让空白部分分布在子元素两侧

5. space-around：让子元素左右对齐，剩余空白部分平均分布于子元素中间

6. initial：设置该属性为它的默认值。

7. 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