弹性盒子。

 <!-- 

        弹性盒

        有两条轴

            默认的主轴方向---x轴的方向、水平向右（左侧边为主轴的起始点，右侧边为主轴的终点）

            默认的交叉轴（侧轴）方向---y轴的方向，水平乡下（上方为侧轴的起始点，下方为侧轴的终点)3

     -->/* 

            方向：

                1、使用位置的关键字

                    to right  方向自左向右

                    to left  方向自右向左

                    to top  方向自下向上

                    to bottom  方向自上向下

 

 

                     to right top  方向从左下往右上

                     to left bottom  方向从右上往左下

                     to right bottom  方向从左上往左下

                     to left top  方向从右下往左上

                度数：0deg   to top

                    90deg   to right

                百分比

            *//* 弹性子元素在侧轴上的对齐方式 */

            align-items: flex-start;/* 默认值：子元素在侧轴的顶端对齐 */

            align-items: flex-end;/* 子元素在侧轴的默端对齐 */

            align-items: center;/* 子元素在侧轴的中间对齐 */

            align-items: baseline;/* 子元素在第一行文字的基线对齐 */

            align-items: stretch;/* 默认值（如果子元素没有高度的时候）：如果弹性子元素没有高度或者高度为auto、将占满整个容器的高度 */

        }/* 主轴的方向----子元素的排列方向 */

            flex-direction: row;/* 默认值：水平向右，起点在左端 */

            flex-direction: row-reverse;/* 默认值：水平向左，起点在右端 */

            flex-direction: column;/* 垂直方向--从上往下，起点在上方 */

            flex-direction: column-reverse;/* 垂直方向--从下往上，起点在下方 */

            /* 设置主轴的对齐方式、弹性子元素在主轴方向的对齐方式 */

            justify-content: flex-start;/* 默认值：主轴在顶端对齐 */

            justify-content: flex-end;/*主轴在默端对齐 */

            justify-content: center;/* 居中对齐、子元素位于弹性容器中心 */

            justify-content: space-between;/* 两端对齐、子元素和子元素之间有空白、项目之件的间距相等 */

            justify-content: space-around;/* 四周对齐、子元素之前、之间、之后都有空白、并且空白自行分配。项目和项目之间的间隔要比项目和边框之间的间距大一倍 */

            justify-content: space-evenly;/* 平均分配、项目和项目之间、项目与边框之间、间距相等 */flex-wrap: nowrap;/* 默认值：不换行 */

            flex-wrap: wrap-reverse;/* 换行、第一行在下方显示 */

            flex-wrap: wrap;/* 换行、在第一行显示 */

 

            /* 折行、控制行与行之间的距离 */

            align-content: flex-start;/* 默认值。顶端没有间距 */

            align-content: flex-end;/* 沿末端对齐，没有间距 */

            align-content: center;/* 居中对齐，没有行间距 */

            align-content: space-between;/* 两端对齐，中间的距离自动分配 */

            align-content: space-around;/* 四周对齐 */

            align-content: space-evenly;/* 平均分配 */

 

            /* 注意：弹性盒项目为多行时才会有效果 ，必须要有折行属性

*/

        }