弹性布局

弹性布局
是css3给出的新的布局方式
越来越多的浏览器支持弹性布局,它是未来的一个趋势

使用弹性布局,首先需要把父元素设置成一个弹性容器,弹性容器的设置方式分为两种
**1. display:flex 设置块元素弹性容器
2. dinsplay:inline-flex 设置行元素弹性容器 (一般不用)

弹性布局的布局方式,是根据主轴的方向来确定子元素的排列方式,子元素必须是具有块属性的特征

以下属性都是设置在弹性容器上

1.设置主轴方向 flex-direction

        column 按列排布,子元素垂直排列,把主轴方向设置成垂直向下,从上到下
        row (默认) 按行排布,子元素横向排列,把主轴方向设置成横向向右,从左到右
        row-reverse 按行排布,子元素横向排列,把主轴方向设置成横向向左,从右到左
        column-reverse 按列排布,子元素垂直排列,把主轴方向设置成垂直向上,从下到上

2.设置子元素是否换行 flex-wrap

        nowrap (默认) 子元素不换行
        wrap 子元素换行
        wrap-reverse 子元素换行，从下往上排列
    
    以上两个属性可以简写
    flex-flow: column wrap；

3.align-content 用来设置子元素为多行行间距，如果子元素为单行，则不起作用

        stretch (默认值) 子元素如果没有高，则会被拉伸，如果有高，则会平分父元素的高度，进行换行
        flex-start 子元素从垂直于主轴方向的轴上方开始渲染，第二行紧跟第一行
        flex-end 子元素从垂直于主轴方向的轴下方开始渲染，第二行紧跟第一行
        center 子元素居中排列
        space-around 子元素行间距平分
        space-between 子元素行间距相等，并且第一个和最后一行在父容器的边缘

4.justify-content 子元素在主轴上的布局方式 （默认主轴方向为从左到右横向）

        flex-start 左对齐(默认)
        flex-end 右对齐
        center 居中
        space-around 子元素之间的距离相等
        space-between 两端对齐，子元素之间的距离相等
        
    **align-items 子元素在垂直于主轴方向上的布局方式 （默认主轴方向为从左到右横向）
        flex-start 上对齐(默认)
        flex-end 下对齐
        center 居中
        stretch 默认，如果子元素没有高，则默认拉伸
        baseline 基线对齐

简言之：
justify-content:水平方向对齐方式（主轴）（左对齐，右对齐，居中对齐，分散对齐，两端对齐）
align-items:垂直的方向对齐方式（子轴）（上对齐，垂直对齐，底对齐，基线（内容））
align-content:多行（主轴换行）布局中的行高

弹性布局子元素的设置

order 用来设置单个子元素的次序，oreder的值越大，元素越靠后，order的默认值是0

    flex-grow 设置子元素宽度的放大比例，默认是 0 ，就是不放大
    flex-shrink 当父元素的宽度，小于子元素盒模型宽度的总和的时候，子元素如何缩小自己的宽度，值越大，缩小的越厉害，默认是0 不缩小
    flex-basis 设置子元素，在主轴方向上所占的空间大小，也只支持百分比，还支持具体的值，一般不会主动去设置这个属性，如果要设置，一般设置成auto，工作中通常使用width属性来设置子元素的宽度

flex： 他是 flex-grow flex-shrink flex-basis的综合写法，默认值是 0 1 auto

    flex：0 1 auto
    通常在使用的时候，后面两个属性可选
    常规用法 flex:1(1 1 auto)

align-self 该属性用来对单独某一个子元素设置单独的对齐方式，它可以覆盖父级对子级设置的对齐方式，它的属性值和 align-items的完全一致