Flex：实例

目的：

代码：

<!--pages/index/index.wxml-->
<view class="container">
  <view class="top">
    <text class="top_left">1</text>
    <view class="top_right">
      <text class="top_right_high">2</text>
      <text class="top_right_low">3</text>
    </view>
  </view>
  <view class="buttom">
    <view class="buttom_left">
      <text class="buttom_left_high">4</text>
      <text class="buttom_left_low">5</text>
    </view>
    <view class="buttom_right">
      <text class="buttom_right_high">6</text>
      <text class="buttom_right_low">7</text>
    </view>
  </view>
</view>

/* pages/index/index.wxss */
/* 全局 */
.container{
  display: flex;
  flex-direction: column;
}
/* 上半部 */
.top{
  height: 50vh;
  display: flex;
  flex-direction: row;
}
.top_right{
  display: flex;
  flex-direction: column;
}
.top_left{
  height: 600rpx;
  width: 375rpx;
  background-color: red;
}
.top_right_high{
  height: 300rpx;
  width: 375rpx;
  background-color: gold;
}
.top_right_low{
  height: 300rpx;
  width: 375rpx;
  background-color: blue;
}
/* 下半部 */
.buttom{
  height: 50vh;
  display: flex;
  flex-direction: row;
}
.buttom_right{
  display: flex;
  flex-direction: column;
}
.buttom_left{
  display: flex;
  flex-direction: column;
}
.buttom_right_high{
  height: 300rpx;
  width: 375rpx;
  background-color: lightcoral;
}
.buttom_right_low{
  height: 300rpx;
  width: 375rpx;
  background-color: hotpink;
}
.buttom_left_high{
  height: 300rpx;
  width: 375rpx;
  background-color:  aqua;
}
.buttom_left_low{
  height: 300rpx;
  width: 375rpx;
  background-color: green;
}