flex布局（2）

改变主轴方向 flex-direction

box {
    /* 父元素设置flex布局 */
    display:flex;
    /* 默认值，子元素的排布方式是从左到右(水平) */
    flex-direction:row;
    /* 改变子元素的排布方式，变成了从上到下(垂直) */
    flex-direction:column;
    /* 改变子元素的排布方式，变成了从有到左(水平反方向) */
    flex-direction:row-reverse;
    /* 改变子元素的排布方式，变成了从下到上(垂直反方向) */
    flex-direction:column-reverse;
}

设置子元素是否换行显示 flex-wrap

.box {
    /* 父元素设置flex布局 */
    display:flex;
    /* 默认值 子元素会强制在一行上显示 */
    flex-wrap:nowrap;
    /* 设置子元素宽度超出父元素宽度时，自动换行 */
    flex-wrap:wrap;
}

多行侧轴的对齐方式 align-content

.box {
    /* 父元素设置flex布局 */
    display:flex;
    /* 让子元素换行*/
    flex-wrap:wrap;
    /* 默认值 子元素会拉伸至父元素高度等高 */
    align-content:stretch;
    /* 设置子元素从侧轴的开头进行排布 */
    align-content:flex-start;
    /* 设置子元素从侧轴的尾部进行排布 */
    align-content:flex-end;
    /* 设置子元素在侧轴居中排布 */
    align-content:center;
    /* 设置子元素侧轴两端对齐 其它盒子平分剩余间隙 */
    align-content:space-between；
    /* 设置每个子元素的左右间隙相等 */
    align-content:space-around;
    /* 设置子元素所有间隙相等 */
    align-content:space-evenly;
}

注：flex布局默认是强制在一行上显示，所以要出现换行才会用到多行侧轴的对齐方式。一般我们可以通过flex-wrap:wrap;来判断要使用单行或多行的侧轴对齐方式

利用flex布局实现上下布局效果

.box {
    /* 父元素设置flex布局 */
    display:flex;
    /* 更改子元素的主轴，使其变更成上下排布(垂直) */
    flex-direction:column;
    /* 此时侧轴是水平方向 让当前子元素在侧轴上居中 */
    align-items:center;
    /* 让当前子元素在主轴上所有的间隙都相等 */
    justify-content:space-evenly;
}