微信小程序_Flex布局

Flex布局

Flex是Flexible Box的缩写，顾名思义为“弹性布局”，用来为盒装模型提供最大的灵活性。

坐标轴

如图, 默认的情况下，水平方向的是主轴（main axis），垂直方向的是交叉轴（cross axis。项目在主轴上排列,排满后根据属性设置在交叉轴上换行, 交叉轴方向取决于主轴方向.

容器属性

flex-direction 通过设置坐标轴来设置项目排列方向

flex-direction: row（default） | row-reverse | column | column-reverse

row, 主轴横向,即从左到右. row-reverse, row的反向.
column, 主轴纵向,即从上到下. column-reverse column的反向.

flex-wrap 是否允许多行排列以及排列方向

flex-wrap: nowrap（default） | wrap | wrap-reverse

nowrap, 不换行,内容过多