小程序的布局分为两类:横向布局和纵向布局
- 横向布局
从左到右
如:
.wxss文件
.rowLayout {
display: flex;
flex-direction: row;
}
.wxml (views是我在.json定义的数组,有四个元素)
效果图如下:
display: flex;这句的作用:当布局超过屏幕时(因为是横向布局,所以这里指屏幕的宽),平均分布,width这个属性设置更大的值的时候,都会无效。例如我把views这个数组改成只有两个元素,其他的都不变的时候,效果就变成了下图
- 纵向布局
从上到下
如:.wxss文件
.rowLayout {
display: flex;
flex-direction: column;
}
.wxml (views是我在.json定义的数组,有四个元素)
效果图如下:
下面再为大家介绍几种常用的布局效果 - 水平居中
.rowcenter {
justify-content: center;
display: flex;
} - 垂直居中
.columncenter {
align-items: center;
display: flex;
} - 水平垂直居中
.row-column-center {
display: flex;
justify-content: center;
align-items: center;
} - 底部悬浮按钮
.bottom-button {
position: fixed;
bottom: 0;
height: 45px;
width: 100%;
} - 左-中-右布局
//首先,要一个view把左中右囊括起来
.location {
margin-left: 20px;
margin-top: -70px;
height: 100px;
align-items: center;
display: flex;
}
//这是左边的样式
.location-left {
margin-left: 5px;
width: 60px;
}
//这是中间的样式
.location-center {
flex: 1;
margin-right: 0px;
overflow: hidden; /自动隐藏文字/
text-overflow: ellipsis; /文字隐藏后添加省略号/
white-space: nowrap; /*强制不换行/
}
//这是右边的样式
.location-right {
padding-right: 5px;
}