微信小程序view標簽以及display:flex的測試

一：testview.wxml，testview.js自動生成示例代碼

//testview.wxml
<view class="section">
  <view class="section__title">flex-direction: row</view>
  <view class="flex-wrp" style="display:flex;  flex-direction:row;">
    <view class="flex-item bc_green" style="background-color:green">1</view>
    <view class="flex-item bc_red" style="background-color:red">2</view>
    <view class="flex-item bc_blue" style="background-color:blue">3</view>
  </view>
</view>
<view class="section">
  <view class="section__title">flex-direction: column</view>
  <view class="flex-wrp" style="display:flex;height: 300px;flex-direction:column;">
    <view class="flex-item bc_green" style="background-color:green">1</view>
    <view class="flex-item bc_red" style="background-color:red">2</view>
    <view class="flex-item bc_blue" style="background-color:blue">3</view>
  </view>
</view>

二：testview.wxss

//testview.wxss
.flex-item{
  display: flex;
  height: 50px;
  width: 50px;
  align-items: center;
  justify-content: center;
  border: 1px solid orange;
}

三：app.json上配置頁面路徑，效果如下