首先介绍弹性盒布局中的一些术语的意思
main-axis:进行布局时作为布局基准的轴,在横向布局时为水平轴,在纵向布局时为垂直轴
main-start/main-end:进行布局时的起点和终点。在横向布局时为容器的左端和右端,在纵向布局时为容器的顶端和底端。
cross-axis:与main-axis垂直相交的轴,在横向布局时为垂直轴,在纵向布局时为水平轴。
cross-start/cross-end:cross-axis的起点和终点。在横向布局时为容器的顶端和底端,在纵向布局时为容器的左端和右端。
将flex-wrap属性值指定为wrap且进行横向多行布局时,按从cross-start到cross-end方向,即从上往下布局。
将flex-wrap属性值指定为wrap-reverse且进行横向多行布局时,按从cross-end到cross-start方向,即从下往上布局。