微信小程序开发经验总结(四)

最新推荐文章于 2023-03-19 21:21:46 发布

LinWeiJ

最新推荐文章于 2023-03-19 21:21:46 发布

阅读量1.2k

点赞数

分类专栏：微信小程序文章标签： flex 微信小程序 text box wxss

本文链接：https://blog.csdn.net/LinWeiJ/article/details/78026379

版权

定义在 app.wxss 中的样式为全局样式，作用于每一个页面。在 page 的 wxss 文件中定义的样式为局部样式，只作用在对应的页面，并会覆盖 app.wxss 中相同的选择器。

官方demo使用了这种布局,没有采用float布局,使用起来挺方便的
Flex是Flexible Box的缩写，意为”弹性布局”
参考: http://www.runoob.com/w3cnote/flex-grammar.html
flex-direction属性决定主轴的方向（即项目的排列方向）
row（默认值）：主轴为水平方向，起点在左端。
row-reverse：主轴为水平方向，起点在右端。
column：主轴为垂直方向，起点在上沿。
column-reverse：主轴为垂直方向，起点在下沿
align-items align-items属性定义项目在交叉轴上如何对齐。

（1）flex-start：交叉轴的起点对齐。
（2）flex-end：交叉轴的终点对齐。
（3）center：交叉轴的中点对齐。
（4）baseline: 项目的第一行文字的基线对齐。
（5）stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。
justify-content justify-content属性定义了项目在主轴上的对齐方式。
（1）flex-start（默认值）：左对齐
（2）flex-end：右对齐 <