微信小程序开发经验总结
微信小程序开发经验总结(一)
微信小程序开发经验总结(二)
微信小程序开发经验总结(三)
微信小程序开发经验总结(四)
微信小程序开发经验总结(五)
微信小程序开发经验总结(六)
微信小程序开发经验总结(七)
12. wxss
全局样式与局部样式
- 定义在 app.wxss 中的样式为全局样式,作用于每一个页面。在 page 的 wxss 文件中定义的样式为局部样式,只作用在对应的页面,并会覆盖 app.wxss 中相同的选择器。
flex
官方demo使用了这种布局,没有采用float布局,使用起来挺方便的
Flex是Flexible Box的缩写,意为”弹性布局”
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:右对齐 <