css3弹性盒子

一、display: flex;

        当容器空间不足时，项目会等比例缩小

        当容器空间有剩余时，项目不变

二、主轴方向的对齐方式

        justify-content: flex-start; 项目水平方向起点对齐

        justify-content: flex-end; 项目水平方向终点对齐

        justify-content: center; 项目水平方向居中对齐

        justify-content: space-around; 每一个项目两侧的距离相等

        justify-content: space-between; 每两个项目之间的距离相等

        justify-content: space-evenly; 每两个项目之间的距离与边沿项目距离容器之间的距离相等

三、交叉轴的对齐方式

        align-items: stretch; 默认 如果未设置高度或为auto时，将占满个父容器。

        align-items: flex-start;  居上对齐

        align-items: flex-end;  居下对齐

        align-items: center;  居中对齐

        align-items: baseline;  与第一个项目中的的文字基线对齐

四、主轴方向

        flex-direction: row; 默认 水平方向从左往右

        flex-direction: row-reverse; 水平方向从右往左

        flex-direction: column; 垂直方向从上往下

        flex-direction: column; 垂直方向从下往上

        主轴和交叉轴垂直

五、换行

        flex-wrap: nowrap; 不换行 默认

        flex-wrap: wrap; 换行 第一行在上方

        flex-wrap: wrap-reverse; 换行 第一行在下方

         flex-flow: flex-direction flex-wrap; 简写

六、项目整体

        align-content: flex-start; 项目整体居上

        align-content: flex-end; 项目整体居下

        align-content: center; 项目整体居中

        align-content: space-between;  每两行之间的距离相等

        align-content: space-around;  每一·行两侧的距离相等

        align-content: space-evenly;  每两行之间的距离与边沿项目距离容器之间的距离相等