<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="container">
<div class="item a">元素一</div>
<div class="item b">
<div class="bl">
<div class="blt"></div>
<div class="blb">
<div class="ltl"></div>
<div class="ltr"></div>
</div>
</div>
<div class="br"></div>
</div>
<div class="item c">
<div class="cl"></div>
<div class="cr"></div>
</div>
</div>
</body>
<style>
* {
margin: 0;
padding: 0;
}
.container {
width: 375px; /*把容器宽度设置为 300px;没有设置高度。 */
height: 376px;
display: flex;
flex-flow:column;
}
.item {
width: 375px;
/* 每个项目宽度为 150px，加起来大于 300px */
/* 设置项目默认撑开的高度为 100px */
}
.a {
background-color: #E3ABB3;
height:100px;
/* 第一个项目给定固定高度 100px； */
}
.b {
display: flex;
flex-flow:row;
}
.c {
display: flex;
flex-flow:row;
}
.bl {
display: flex;
flex-flow:column;
width: 275px;
height:176px ;
}
.br {
flex:1;
background-color: rgb(78, 50, 204);
}
.blt {
width: 275px;
height:88px ;
background-color: rgb(218, 28, 37);
}
.blb {
display: flex;
flex-flow: row;
flex:1;
}
.ltl {
width:200px;
height: 88px;
background-color: rgb(44, 218, 28);
}
.ltr {
flex:1;
background: orange;
}
.cl {
width: 50%;
height: 100px;
background-color: orangered;
}
.cr {
flex: 1;
background: yellow;
}
</style>
</html>
