微信小程序布局 Flex 弹性布局例子

横向排列 

效果

wxml

  1
  2
  3
  4
  5
  6
  7
  8

wxss

.container1 {
  display: flex;  /**指定flex 布局*/
  flex-direction:row; /**布局内item 方向*/
  flex-wrap:wrap; /**不够了就换行*/
  justify-content:space-between; /**主轴两边对其*/
  border:red 1pt solid; /**显示边框*/
} 

.container1 view{
  display: flex; /**指定flex 布局*/
  width:100rpx; /**宽度*/
  height:100rpx; /**高度*/
  justify-content:center; /**主轴居中*/
  align-items:center; /**交叉轴居中*/
  border: 1pt #aaa solid; /**显示边框*/
}

纵向列表

效果

wxml

  1
  2
  3
  4

wxss

.container2 {
  display: flex;  /**指定flex 布局*/
  flex-direction:column; /**主轴 方向*/
} 

.container2 view{
  border: 1pt #aaa solid; /**显示边框*/
  width:100%; /**宽度*/
  height:100rpx; /**高度指定*/
  background-color: greenyellow;
  text-align: center; /**文字居中*/
  line-height: 100rpx; /**文字居中*/
}

简单的登录界面

效果

wxml

  
  用户名
  
  密码
  
  登录
  点这里注册

.container {
  display: flex;  /**指定flex 布局*/
  flex-direction:column; /**布局内item 方向*/
  justify-content:center; /**主轴居中*/
  align-items: center;
  padding: 0rpx 30rpx 0 30rpx;
} 

.logo{
  margin:150rpx 0rpx 150rpx 0rpx;
  width: 200rpx;
  height: 200rpx;
}

.input_text{
  width: 100%;
  font-size: 30rpx;
  color:#666;
  margin-bottom: 20rpx;
  font-weight: bold;
}

input{
  width: 100%;
  height: 70rpx;
  border: 1rpx #bbb solid;
  border-radius: 10rpx; 
  margin-bottom: 20rpx;
  font-size: 30rpx;
  padding-left: 20rpx;
}

.submit{
  margin-top: 50rpx; 
  width:100%;
}

.reg{
  margin-right: 20rpx;
  margin-top: 30rpx; 
  font-size: 25rpx;
  align-self: flex-end;
  color: #88f
}