c3弹性盒—Flex布局

什么是弹性盒

当我们为父盒子设为flex布局以后，他的所有子元素自动成为容器成员，子元素的float、clear和vertical-align属性将失效。也就是通过给父盒子添加flex属性，来控制子盒子的位置和排列方式。

概念：

弹性盒式c3中提出的一种布局方案。是为了针对不同屏幕不同设备的一整套解决方案。主要针对一个容器中的子元素进行排列、对齐、空间分配。

#### Flex布局（弹性盒布局）

添加给父元素的属性：
1、display:形成弹性盒子

 + display:形成弹性盒子
        - flex(常用)/inline-flex(内联弹性盒子);
    + flex-direction:设置主轴的方向
        - row(默认,常用)/row-revese(主轴反向)/column(常用)/column-reverse(主轴反向)
    + flex-wrap： 设置子元素换行
        - nowrap(不换行)/wrap(换行)/wrap-reverse(反向换行);
    + flex-flow: 主轴和换行的简写
        - flex-direction flex-wrap; 
    + justify-content:  设置（主轴）的对齐方式
        - flex-start(主轴起点)/flex-end(主轴终点)center (中心,重要)space-between(两端，重要)space-around(类似盒子产生左右相同的margin，重要)space-evenly(平均，重要);
    + align-items:设置主轴的交叉轴 也就是侧轴的对齐方式
        - flex-start(侧轴起点)/flex-end(侧轴终点)/center(常用)/baseline(基线)/stretch（默认值拉伸,子元素不要设置高
        度）
    + align-content: 设置多行之间的排列
        - flex-start(主轴起点)flex-end/center/space-between /space-around/stretch;

子元素
* 子元素

    + align-self: 设置子元素的排列方式
        - stretch
        - center
        - flex-start
        - flex-end
    - flex-grow: 分配父元素的空间
        - 数值
    - flex-shrink: 设置压缩
        - 默认情况下超出父元素会压缩
        
        - 设置 flex-shrink:0;表示不压缩
       + 设置导航滑动
           1.子元素设置  flex-shrink:0,不压缩
           2.超出对父元素设置overflow:auto
    - order:单独设置某个元素的位置
        - 数值,值越大,越靠后
    - flex: 1; 设置一个值表示和flex-grow一个意思;