<!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; ? /*把容器寬度設(shè)置為 300px;沒有設(shè)置高度挽唉。 */
? ?height: 376px;
? ?display: flex;
? flex-flow:column;
? }
? .item {
? ? width: 375px;
? ? ?/* 每個項目寬度為 150px，加起來大于 300px */
? ? ?/* 設(shè)置項目默認(rèn)撐開的高度為 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>
