微信小程序WCSS display:flex,伸缩项目的子元素默认使用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属性类似

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容