前端-弹性盒子

一.弹性盒子模型（display：flex）
  

 1.布局模式：
  

    （1）tabel布局：表格来进行页面布局，适合内容格式比较单一，整齐的布局。
    （2）div+css：盒子模型，使用灵活，但是比较难以控制。
    （3）弹性盒子模型（display：flex，也是使用div，让div的display属性变为flex）
        特点：
            在不同方向排列元素
            重新排列元素的显示1顺序
            更改元素的对齐方式
            动态地将元素装入容器

    2.基本概念

    （1）容器（flex container）：是一个块级标签（特征：可以包含其他的页面元素）
    （2）项目：也成为子项（包含在容器的元素）
    （3）排列方向（direction）：元素的布局方向

    3.容器属性
    

    （1）flex-direction：定义容器中元素的布局方式（排列方式），取值如下：
        a.row：默认值，排列的主轴方向为水平方向，从最左端开始
        b.row-reverse：排列的主轴方向为水平方向，从最右端开始
        c.column：主轴方向为垂直方向，并且起点是上沿
        d.column-reverse:主轴方向为垂直方向，并且起点是下沿
    （2）flex-wrap：决定容器里的元素是否换行
        a.nowrap:默认，不换行
        b.wrap：换行，第一行在上方
        c.wrap-reverse：换行，第一行在下方
    （3）flex-flow：是flex-direction和flex-wrap的简写，默认值是row nowrap
    （4）justify-content:子项的对齐