22.flex布局

怪异盒模型

content-box
		这是由 CSS2.1 规定的宽度高度行为。宽度和高度分别应用到元素的内容框。在宽度和高度之外绘制元素的内边距和边框。

border-box 为元素设定的宽度和高度决定了元素的边框盒。就是说，为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。
FLEX布局

Flex容器：采用 Flex 布局的元素的父元素；
Flex项目：采用 Flex 布局的元素的父元素的子元素；
容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。
项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。

弹性盒子：是一个布局方法 
            作用：弹性盒子控制子元素（不包含孙子辈的元素）的布局方式
            特点：
                a.弹性盒子默认情况下是沿着“主轴”排列 默认情况下x轴为主轴 注：主轴可以更改
                b.弹性盒子称作“灵活元素”，所有子元素都可以设置宽高
                c.如果一个子盒子想在弹性盒子里面上上下左右居中，只需要你该子元素加margin:auto;

        1.设置弹性盒（添加父元素上）
          display:flex;

        2.改变主轴方向（添加父元素上）
            flex-direction:
                属性值：
                    row 默认值，主轴为x轴方向排列
                    column 主轴默认y轴方向排列
                    row-reverse 主轴为x轴 反向排列
                    column-reverse 主轴为y轴 反向排列

        3.主轴对齐方式（添加父元素上）
            justifiy-content
                属性值：
                        flex-start  以弹性盒主轴开始位置对齐
                        flex-end    以弹性盒主轴结束位置对齐
                        center      在主轴上居中
                        space-between   在主轴上两端对齐
                        space-round 自动分配主轴空间

        4.在侧上对齐方式（添加父元素上）
            align-items
                属性值：
                    flex-start      侧轴开始的位置
                    flex-end        侧轴结束的位置
                    center          侧轴中间
                    baseline        等效flex-sart
                    stretch(默认值)  拉伸

        5.是否让子元素超出的时候换行(弹性盒子子元素默认不会换行，在主轴上挤压)
            flex-warp
                nowarp 不换行
                warp   换行
                warp-reverse   底部向上显示
        
        6.控制行与行之间的间距  对单行无效（添加在父元素上面）
            align-content
                属性值
                    flex-start
                    flex-end
                    center
                    space-between
                    space-around
                    stretch

        7.flex-flow    添加在父元素上面
            flex-direction 和 flex-warp的缩写
            eg: flex-flow:row warp;


		添加在子元素上面的属性         
         8.控制某一个元素在侧轴的对齐方式
            align-self:
                属性值：
                    auto        默认值 元素继承了它的父容器的align-item属性
                    stretch     元素被拉伸以适应容器
                    center      元素位于容器的中心
                    flex-start  元素位于容器的开头
                    flex-end    元素位于容器的结尾
            
        9.控制子元素的排列顺序
        order
            属性值是一个数字，数字越大越往后面排列，能接收负数
            默认值为0
        
        10.剩余空间分配
        flex:1;     （把剩余空间全部分配给当前元素）

        flex-shrink:0; 子元素不在主轴挤压

flex的三兄弟
                flex-grow
                    一个数字，规定项目将相对于其他灵活的项目进行扩展的量。
                flex-shrink
                    一个数字，规定项目将相对于其他灵活的项目进行收缩的量。
                flex-basis
                    项目的长度

flex布局案例