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

横向排列 

效果

wxml

<view class="container1">
  <view>1</view>
  <view>2</view>
  <view>3</view>
  <view>4</view>
  <view>5</view>
  <view>6</view>
  <view>7</view>
  <view>8</view>
</view>

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

<view class="container2">
  <view>1</view>
  <view>2</view>
  <view>3</view>
  <view>4</view>
</view>

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

<view class='container'>
  <image class='logo' src='/images/avic_logo.png'></image>
  <text class="input_text">用户名</text>
  <input name="username" placeholder='请输用户名'></input>
  <text class="input_text">密码</text>
  <input type='password' placeholder='请输入密码'></input>
  <button class="submit" form-type='submit' type='primary'>登录</button>
  <text class="reg">点这里注册</text>
</view>

.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
}