微信小程序，橫向布局，縱向布局

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 的引用方式