小程序 View 支持两种布局方式:Block 和 Flex
所有 View 默认都是 block
要使用 flex 布局的话需要显式的声明:
display:flex;
接下来便可以在view 的wxss里尝试如下属性:
例如:
//使用 flex 布局
display: flex;
.hengxiangClass {
display: flex;
flex-direction: row;
justify-content: space-around;
align-items: center;
}
.shuxiangClass {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
横向布局or竖向布局=>设置属性 flex-direction
flex-direction: row;
{
row:从左到右的水平方向为主轴
row-reverse:从右到左的水平方向为主轴
column:从上到下的垂直方向为主轴
column-reverse:从下到上的垂直方向为主轴
}
设置元素在横向上的布局方向,需要设置 justify-content 属性
justify-content: space-around;
{
flex-start:主轴起点对齐(默认值)
flex-end:主轴结束点对齐
center:在主轴中居中对齐
space-between:两端对齐,除了两端的子元素分别靠向两端的容器之外,其他子元素之间的间隔都相等
space-around:每个子元素之间的距离相等,两端的子元素距离容器的距离也和其它子元素之间的距离相同
}
设置元素在纵向上的布局方向,需要设置 align-items 属性
align-items: center;
{
stretch 填充整个容器(默认值)
flex-start 侧轴的起点对齐
flex-end 侧轴的终点对齐
center 在侧轴中居中对齐
baseline 以子元素的第一行文字对齐
}
用于控制子 View 是否换行=>设置flex-wrap 属性
flex-wrap: wrap;
{
nowrap:不换行(默认)
wrap:换行
wrap-reverse:换行,第一行在最下面
}
转载:https://blog.csdn.net/weixin_36065510/article/details/73203720