弹性盒模型（上）

弹性盒

        作用：控制离它（最近的一层）子元素,布局方式。

        特点：

            ① 弹性盒子里面的离它最近的一层子元素都可以添加大小。

            ② 如果想让弹性盒子里面的一个子元素左右上下居中，只需要给子元素添加margin:auto即可

            ③ 弹性盒子里面的子元素都是沿着“主轴”排列（注：默认情况下X轴为主轴。）

     一：触发弹性盒子：

             display:flex;

    二：改变主轴的方向：

        flex-direction:

            属性值：

                row     (默认值：X轴为主轴)

                column  (Y轴为主轴)

                column-reverse    (以Y轴为主轴反向排列)

                row-reverse    (以X轴为主轴反向排列)

    三：改变主轴的对齐方式：

        justify-content:

            属性值：

                flex-start   默认状态：在弹性盒子开始的地方显示

                flex-end     在弹性盒子末端对齐

                center        居中对齐

                space-between    两端对齐

                space-around     自动分配间距

 

    四：侧轴的对齐方式:

        align-items:

            flex-start    侧轴开始的位置

            flex-end      侧轴结束的位置

            center        侧轴居中的位置

            baseline      基线（flex-start等效）

            stretch（默认值）   拉伸

 

    五：控制弹性盒子里面的子元素换行处理：

        flex-wrap:

            wrap         换行

            nowrap       不换行

            wrap-reverse   反向换行

    六：控制行与行的对齐方式：

        align-content:

                flex-start   默认状态：行与行之间不存在默认的行间距

                flex-end     在弹性盒子末端对齐

                center        居中对齐

                space-between    两端对齐

                space-around     自动分配间距

 

    七：补充：flex-direction 和 flex-wrap简写：

        flex-flow:;

    

注：以上7个属性全部添加在父元素弹性盒子上面