小程序开发之组件view（视图容器）

view

view为视图容器。

index.wxml

<view class="section">
  <view class="section_title">横向</view>
  <view class="flex-wrp" style="flex-direction:row;">
    <view class="bg_green">1</view>
    <view class="bg_red">2</view>
    <view class="bg_blue">3</view>
  </view>
</view>

<view class="section">
  <view class="section_title">竖向</view>
  <view class="flex-wrp" style="height: 300px;flex-direction:column;">
    <view class="bg_green">1</view>
    <view class="bg_red">2</view>
    <view class="bg_blue">3</view>
  </view>
</view>

index.wxss

.flex-wrp {
  display: flex;
}
.bg_green {
  background: green;
  width:100px; 
  height: 100px;
}
.bg_red {
  background: red;
  width:100px; 
  height: 100px;
}
.bg_blue {
  background: blue;
  width:100px; 
  height: 100px;
}

视图展示