weChat布局-弹性盒子布局-flex

在父元素设置

display:flex;

s三个设置协助:

• flex-direction 规定灵活项目的方向

flex-direction:colum;  //垂直

• flex-wrap  定义，如果一条轴线排不下，如何换行。

flex-wrap: nowrap | wrap | wrap-reverse;  //不换行| 换行 | 换行，第一行在下方

• justify-content 规定元素在方向上的对齐方式

justify-content: flex-start|flex-end|center|space-between|space-around|initial|inherit;

• align-items  定义flex子项在flex容器的当前行的侧轴（纵轴）方向上的对齐方式

align-items: stretch|center|flex-start|flex-end|baseline|initial|inherit;

• align-content 属性定义了多根轴线的对齐方式

资料: https://blog.csdn.net/lyznice/article/details/53981062