本文介绍了微信小程序中使用flex布局的基本概念，包括默认的垂直布局、flex布局的主轴和交叉轴，以及相关的容器属性如flex-direction、flex-wrap、justify-content和align-items。此外，还详细讲解了flex元素的属性，如flex-grow、flex-shrink、flex-basis和order，以及如何通过align-self来定义元素自身的布局。最后，简要提到了定位知识，包括相对定位和绝对定位的概念。
布局基础
默认每个View进行垂直布局。每个view占据一行。
flex布局（设置display=flex）
平面布局有一个主轴和交叉轴（类似于平面坐标中的X轴和 Y轴）
默认X轴为主轴 Y轴为交叉轴
flex容器属性：针对于容器内的容器
flex-direction排列方向
row(默认) column
flex-wrap元素换行问题
nowrap（不换行） wrap(换行)
wrap-reverse换行反转（多的一行在上面）
flex-flow上面两个的简写
先定义方向 再定义换行
justify-content主轴的对齐元素
center(沿主轴居中对齐)
flex-start（主轴左边、默认方式） flex-end（主轴右边）
space-around（各个元素平分主轴空间）
最低0.47元/天 解锁文章
扫一扫
1267
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
