WeChat小程式交流（QQ群：769977169）

效果圖示例：左中右排列、左右上右下排列、上左下右下排列。

xxx.wxml中的結構設定

<!--三欄佈局：左、中、右-->
<view class='contentLeftCenterRight'>
  <view class='itemSize red'>1</view>
  <view class='itemSize green'>2</view>
  <view class='itemSize blue'>3</view>
</view>

<!-- 三欄佈局：左、上、下-->
 <view class='contentRightTopButtom'>
  <view class='itemSize red' bindtap='clickTap'>單擊</view>
  <view class='contentTopButtom'>
    <view class='itemSize green' bindlongtap='longTap'>長按</view>
    <view class='itemSize blue'>3</view>
  </view>
</view> 

<!--三欄佈局：上、左、右-->
 <view class='contentTopLeftRight'>
  <view class='itemSize red' style='color:white;text-align:center;line-height:50px;' bindtouchstart='touchStart' bindtouchend='touchEnd' bindtouchmove='touchMove' bindtouchcancel='touchCancel'>觸控手勢</view>
  <view class='contentLeftRight'>
    <view class='itemSize green'>2</view>
    <view class='itemSize blue'>3</view>
  </view>  
</view>  
 

xxx.wxss中的樣式設定

/* pages/modules/viewPage/view.wxss */
.contentLeftCenterRight{
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.contentLeftCenterRight .itemSize{
  flex: 1; 
  height:50px;

  color:white;
  text-align:center;
  line-height:50px;
  font-size:20px;
}


.contentRightTopButtom{  
  display:flex;

  margin-top:20px;
  height:100px;
}
 .contentRightTopButtom>.itemSize{
  color:white;
  text-align:center;
  line-height:100px;
  font-size:20px;

  width: 100px;
  height:100px;
} 
.contentTopButtom{
  flex: 1; 
  display: flex;  
  justify-content: space-around;
  align-items: stretch;
  flex-direction: column;
}
.contentTopButtom .itemSize{
  flex: 1; 
  align-self: stretch;

  color:white;
  text-align:center;
  line-height:50px;
  font-size:20px;

  height:50px;
}

.contentTopLeftRight{
  margin-top: 20px;

  display: flex;
  flex-direction: column;

  height: 100;
}
.contentTopLeftRight>.itemSize{
  flex: 1;
  height: 50px;
}
.contentLeftRight{
  flex: 1; 
  display: flex;
  justify-content: space-around;
  align-items: stretch;  
  flex-direction: row; 

  height: 50px;
}
.contentLeftRight .itemSize{
  flex: 1;
  height: 50;
}

.yellow{
  background-color: yellow;
}
.red{
  background-color: red;
}
.green{
  background-color: green;
}
.blue{
  background-color: blue;
}