Flex：实例

目的：

代码：

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

<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>

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
/* 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;
}