横向排列 

效果

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}