Flex：实例

目的：

代码：

  
    1
    
      2
      3
    
  
  
    
      4
      5
    
    
      6
      7
    
  

/* 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;
}