1、概述

從Android開發過來的，所以對於wxml 這剪裁至html 的佈局還是比較靈活和複雜。Android裡是把方向orientation 分為 horizontal 和vertical

2、程式碼

wcss部分

/* pages/test/layout.wxss */

/*橫向佈局  */
.layout_horizontal{
  height: 100rpx;
  display: flex;
  /*row 橫向  column 列表  */
  flex-direction: row;
}

/*縱向佈局  */
.layout_vertical{
  height: 100rpx;
  display
 
: flex;
  /*row 橫向  column 列表  */
  flex-direction: column;
}

/*劃線  */
.line {
   background-color: blue;
   height: 2rpx;
   width: 100%;
}

wxml 部分

<!--pages/test/layout.wxml-->
<!--橫向均分  -->
<view class="layout_horizontal">
  <view style="flex:1;background-color:green">box1</view
 
>
  <view style="flex:1;background-color:blue">box2</view>
</view>

<view class="line" style='background-color:white'></view>
<!--橫向1個固定大小，一個彈簧  -->
<view class="layout_horizontal">
  <view style="width:100px;background-color:green">hbox1</view>
  <view
 
 style="flex:1;width:100px;background-color:blue">hbox2</view>
</view>

<!--縱向  -->
<view class="line" style='background-color:white'></view>
<view class="layout_vertical">
  <view style="width:100px;background-color:green">vbox1</view>
  <view style="flex:1;width:100px;background-color:blue">vbox2</view>
</view>

3、效果圖

4、補充說明

微信小程式 公共wcss 的引用方式