我在工作中遇到小程序的布局问题

此篇完全就是笔记和总结。

1

这种布局这样写。

.input{

flex:1    

}

2

遇到这样的布局（flex布局但是最后一行的个数要少点的情况）

一般你一行有几个就写几个空的view.（例如我这行有三个我就写三个空的view）

wxss如下

不是空的view

month-item {
width:30%;
height:76rpx;
justify-content:space-around;
align-items:center;
background-color:#fff;
border-radius:10rpx;
margin-top:20rpx;

}

空的view

monthempty-item {
width:30%;
height:0rpx;

}

3

这种图片做背景的布局

wxml

< view class= 'bg'>

< image src= '../../img/login-bg.png' ></ image >

</ view >

wxss

.bg {

width: 100%;

height: 100%;

position: fixed;

top: 0;

left: 0;

}

.bg image {

width: 100%;

height: 100%;

position: absolute;

top: 0;

left: 0;

}

先这么多，后续会更新。