流动布局

display: flex;（元素转为弹性布局）
flex-direction:（流动方向） row(column 列);
flex-wrap: wrap;（如果子元素设置宽，则默认排在一行，要想换行则用 flex-wrap:wrap;）
flex:1;(按等分进行分配)

子元素在水平方向对齐方式

justify-content: space-between（左右两边对齐，中间平分）
justify-content:space-around;（左右两边留白，中间平分）
justify-content:flex-start;
justify-content: center(居中对齐) flex-start(左对齐)flex-end(右对齐);
子元素在竖直方向的对齐方式

        align-items: center`(垂直对齐) `flex-start`;(上对齐) `flex-end`(下对齐)
        align-items:stretch`;(子元素没有设置高，则被垂直拉伸和父元素一样高)

align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。

(当项目换为多行时，可使用align-content取代align-items)

       flex-start：与交叉轴的起点对齐。

       flex-end：与交叉轴的终点对齐。

       center：与交叉轴的中点对齐。。

       space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。

       space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。

       stretch（默认值）：轴线占满整个交叉轴。