要使用 flex 布局的话需要显式的声明:
下面就来介绍下微信小程序text布局位置的 Flex 布局
先做一个简单的 demo
加上背景色能看的更清楚些
然后大概是这个样子的:
好使用 flex 布局主意,貌姒 view 不会自动继承需要在每个想使用的 view 里都加上。
首先是横向布局和竖向布局要设置属性 flex-direction ,它有4个可选值:
- row:从左到右的水平方向为主轴
- row-reverse:从右到左的水平方向为主轴
- column:从上到下的垂直方向为主轴
然后我们要设置元素在横向上的布局方向,需要设置 justify-content 属性它有5个值可选:
- center:茬主轴中居中对齐
- space-between:两端对齐,除了两端的子元素分别靠向两端的容器之外其他子元素之间的间隔都相等
- space-around:每个子元素之间的距离相等,两端的子元素距离容器的距离也和其它子元素之间的距离相同
然后我们要设置元素在纵向上的布局方向需要设置 align-items 属性,它有5个值可选:
- flex-start 侧轴的起点对齐 (这里我们手动设置下子 view 的高度来看的明显一些)
- center 在侧轴中居中对齐
- baseline 以子元素的第一行文字对齐
此外还有 flex-wrap 属性,用于控制子 View 是否换行有3个值可选:
- nowrap:不换行(默认)
还有子 View 有个 order 属性,可以控制子元素的排列顺序默认为0。
flex 常用布局就这些
写微信小程序text咘局位置的可以试试
本文版权归作者和博客园共有欢迎转载,但未经作者同意必须保留此段声明且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利