弹性盒

一、弹性盒子：布局方案。

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

②特点：

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

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

            c: 弹性盒子里面的子元素都是沿着“主轴”排列

③注：a."主轴":有可能是X轴也有可能是Y轴，如果X轴为主轴，Y轴就是侧轴。

           b.默认情况下X轴为主轴。

二、父元素弹性盒子添加：

1）触发弹性盒子：

        display:flex;

2）改变主轴的方向：

①属性：flex-direction:

②属性值：

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

                column  (Y轴为主轴)

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

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

3）改变主轴的对齐方式：

①属性： justify-content:

②属性值：

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

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

                center        居中对齐

                space-between    两端对齐

                space-around     自动分配间距

4）侧轴的对齐方式:

①属性：align-items:

②属性值：

            flex-start    侧轴开始的位置

            flex-end      侧轴结束的位置

            center        侧轴居中的位置

            baseline      基线（flex-start等效）

            stretch（默认值）   拉伸

5）控制弹性盒子里面的子元素（灵活元素）换行处理：

①属性：flex-wrap

②属性值：

            wrap         换行

            nowrap       不换行

            wrap-reverse   反向换行

6）控制行与行的对齐方式：

①属性：align-content

②属性值：

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

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

                center        居中对齐

                space-between    两端对齐

                space-around     自动分配间距

7）补充：flex-direction 和 flex-wrap简写：

属性：flex-flow:;

三、添加在子元素上面的属性：

1）控制弹性盒子里面 某个 灵活元素 在侧轴的对齐方式。

①属性：align-self:

②属性值：

　　　 auto  默认值。元素继承了它的父容器的 align-items 属性。如果没有父容器则为 "stretch"。

            Stretch     元素被拉伸以适应容器。

            Center      元素位于容器的中心。

            flex-start      元素位于容器的开头。

            flex-end        元素位于容器的结尾。

2）控制子元素的排列顺序：

①属性：order: 数值越大越往后排列。支持负数。

3）剩余空间的分配：

①flex:1;  分配主轴剩余空间。

②flex:1;  简写形式。

flex-grow:;      扩展的量

flex-shrink:;    收缩的量

flex-basis:;     元素的大小

记住：flex-shrink:0;  不压缩。