3.弹性盒子

1. 分类

    display: flex;  块级
    display: inline-flex;  行级 

给父元素设置

2. 排列方式

     flex-direction: row;  （默认值)从左排列
     flex-direction: row-reverse;  从右排列
     flex-direction: column;  从上排列
     flex-direction: column-reverse ;  从下排列

给父元素设置

3. 换行

      flex-wrap: wrap-reverse;换行, 从下往上排列
      flex-wrap:nowrap; 不换行 
      flex-wrap:wrap; 换行 
      flex-wrap:flex;可以根据父元素宽度来改变子元素宽度，不想改变，设置换行

给父元素设置

4. 排列+换行

      flex-flow: row nowrap;  从左排列不换行
      flex-flow: <flex-direction>  <flex-wrap>; 

5. 子元素对齐方式

      justify-content: space-between; 先两边对齐，然后等间距的分布在容器中 
      justify-content: space-around; 先居中对齐，然后等间距的分布在容器中 
      justify-content: space-evenly; 注重间距，先将所有间距等分，再排列
      justify-content: center; 居中
      justify-content: flex-end; 右对齐
      justify-content: flex-start; 左对齐

6. 交叉轴上对齐

       align-items: flex-start; 顶点对齐
       align-items: flex-end;  底部对齐
       align-items:  baseline; 文字顶端对齐
       align-items: center;  中点对齐
       align-items:  stretc; 如果项目未设置高度或设为auto，将占满整个容器的高度。
       效果类似于vertical-align

给父元素设置

7. 子元素属性

7.1 order

定义子元素排列顺序，默认为0
数值越小，排列越靠前（数值可以为负）
order:5;

7.2 flex-grow

1）定义子元素放大倍数，默认为0
2）当所有子元素值为1，即使存在间隙，也不放大，而是等分间隙
3）若一个子元素为2，其他为1，则此子元素比其他元素多放大等分间隙后间隙宽度的一倍

7.3 flex-shrink

1）定义元素缩放比例，默认1
2）可根据父元素的宽度缩放
3）当值为0时，则不根据父元素的宽度改变而缩放

7.4 align-self

给指定元素设置不同的对齐方式
1）auto 继承父元素的对齐方式
2）stretch 元素被拉伸以适应父元素
3）flex-start 元素位于容器的开头
4）center 元素位于容器中间的位置
5）flex-end 元素位于容器的结尾
6）baseline 元素位于容器的基线上