弹性盒模型容器样式和对齐方式

弹性盒模型容器样式

    首先是设置在容器上的样式
        display:flex——将容器设置成弹性盒子，项目(子元素)的排列方式将按照弹性盒子规则进行排布
        flex-direction——设置主轴方向，项目默认会按照主轴方向进行排列
        flex-wrap——当项目总宽度大于容器宽度时的处理方式，默认会不换行，压缩所有项目
        flex-flow——flex-direction属性和flex-wrap属性的简写 默认值为row nowrap
        justify-content——单行项目在主轴方向上的对齐方式
        align-items——单行项目在侧轴方向上的对齐方式
        align-content——多行项目在侧轴方向上的对齐方式
        flex-direction——主轴的方向(即项目的排列方向)
        row(默认值) 主轴为水平方向，起点在左端
        row-reverse 主轴为水平方向，起点在右端
        column 主轴为垂直方向，起点在上沿
        column-reverse 主轴为垂直方向，起点在下沿

弹性盒模型换行和单行对齐

flex-wrap——如果一条轴线排不下，如何换行：

nowrap(默认)：不换行(此时会根据flex-shrink缩小比例把项目进行压缩以放入容器)
wrap：换行，第一行在上方
wrap-reverse：换行，第一行在下方

justify-content——定义了项目在主轴上的对齐方式，具体对齐方式与轴的方向有关，假设主轴为从左到右：

flex-start(默认值) 左对齐
flex-end 右对齐
center 居中
space-between 两端对齐，项目之间的间隔都相等
space-around 每个项目两侧的间隔相等，所以项目之间的间隔比项目与边框的间隔大一倍

左重右轻布局，用弹性盒模型，最后一个元素设置margin-left:auto

弹性盒模型侧轴和多轴对齐

align-items——定义项目在侧轴上如何对齐，具体的对齐方式与侧轴的方向有关，假设侧轴从上到下：

flex-start 侧轴的起点对齐
flex-end 侧轴的终点对齐
center 侧轴的中点对齐
baseline 项目的第一行文字的基线对齐；stretch(默认值)如果项目未设置高度或设为auto，将占满整个容器的高度

align-content：多根轴线的对齐方式，一根轴该属性无效：

flex-start 与侧轴的起点对齐
flex-end 与侧轴的终点对齐
center 与侧轴的中点对齐
space-between 与侧轴两端对齐，轴线间间隔平均分布
space-around 轴线两侧的间隔相等，所以轴线间间隔比轴线与边框的间隔大一倍
stretch(默认值) 轴线占满整个侧轴