弹性盒布局7.11

一、

1、启用弹性盒：例：<div class="box"></div>

                            .box{display:flex;}

 此时的div元素为“弹性容器”，div元素内部的子元素为“弹性项目”。（弹性项目永远在主轴方向上排列，弹性项目的总宽度大于弹性项目宽度，不会发生改变，会根据具体的宽度比例分布弹性容器的宽度指。）

2、主轴：默认情况下为（从左向右）的水平轴。

      交叉轴：交叉轴正交于主轴，垂直轴。（从上到下）

二、

1、justify-content:弹性项目在主轴上的对齐方式。

     取值：flex-start（默认值），弹性项目在主轴的起点对齐。

                center，弹性项目在主轴的中心对齐。

                flex-end,弹性项目在主轴的终点对齐。

                space-between:弹性项目在弹性容器内部平均分布，弹性容器的两边与弹性项目之间                                           没有间隔。

                space-around：弹性项目在弹性容器内部平均分布。

2、align-items:弹性项目在交叉轴上的对齐方式。

     取值：flex-start:弹性项目在交叉轴的起点对齐；   center：弹性项目在交叉轴的中心对齐；

                flex-end:弹性项目在交叉轴的终点对齐；   baseline：在交叉轴方向上延基线对齐；

                stretch（默认值）：拉伸对齐。

              （1）弹性项目中没有height值时，弹性项目的高度会拉伸的与弹性容器同高。

              （2）弹性容器中有height时，弹性项目的高度会拉伸的与具有height的弹性项目同高。

  3、flex-direction:弹性容器的主轴方向。

        取值：row(默认值)：主轴方向为水平方向，左侧为起点，右侧为终点。

                   row-reverse:主轴方向为水平方向，右侧为起点，左侧为终点。

                   column：主轴方向为垂直方向，顶部为起点，底部为终点。

                   column-reverse：主轴方向为垂直方向，底部为起点，顶部为终点。

温习：outline:为元素添加一个轮廓。

           取值：none,没有轮廓

           扩展：outline-color:指定轮廓的颜色；

                      outline-width:指定轮廓的宽度。