微信小程序WCSS display:flex,伸缩项目的子元素

1.主轴起点 -> main start 主轴终点 -> main end 主轴的长度 -> main size
交叉轴起点-> cross start 交叉轴终点-> cross end 交叉轴的长度-> cross size

2.一般来说，主轴的长度是从左到右的，交叉轴的长度是从上到下的，但是我们可以通过flex-direction控制它们的方向

flex-direction方向的属性
row                     从左到右的水平方向为主轴
row-reverse        从右到左的水平方向为主轴
column                从上到下的垂直方向为交叉轴
column-reverse   从下到上的垂直方向为交叉轴

3.对齐方式
justify-content属性,通过定义子元素在主轴上的对齐方式来指明对齐方式
align-items属性,通过定义子元素在交叉轴上的对齐方式来指明对齐方式

 justify-content 属性
 flex-start   默认值,按照主轴起点对齐
 flex-end    按照主轴结束点对齐
 center       在主轴居中对齐
 space-between 两端对齐,除了两端的子元素分别靠向两端的容器之外，其他子元素之间的间隔相等。
 space-around  每个子元素之间的距离相等，两端的子元素距离容器的距离也和其他子元素之间的距离相等

align-items属性类似