思维导图
练习页面
编辑代码
<!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>
<style>
body{
display: flex;
justify-content: center;
flex-flow: wrap;
align-items: flex-start;
}
#Fbox{
width: 1200px;
height: 500px;
border: solid 1px black;
margin: 20px 0 20px 0;
display: flex;
flex-flow: row nowrap;
justify-content: space-around;
align-items: center;
}
.Cbox1,.Cbox2,.Cbox4{
height: 300px;
width: 240px;
border: solid 1px black;
}
.Cbox3{
height: 300px;
width: 400px;
border: solid 1px black;
}
#box1-1{
order: 2;
}
#box1-2{
order: 3;
}
#box1-3{
order: 1;
}
#box1-4{
order: 0;
}
#box2-1{
flex-grow: 2;
}
#box3-1{
flex-shrink: 2;
}
</style>
</head>
<body>
<div id="Fbox">1
<div class="Cbox1" id="box1-1">1</div>
<div class="Cbox1" id="box1-2">2</div>
<div class="Cbox1" id="box1-3">3</div>
<div class="Cbox1" id="box1-4">4</div>
</div>
<div id="Fbox">2
<div class="Cbox2" id="box2-1">1</div>
<div class="Cbox2" id="box2-2">2</div>
<div class="Cbox2" id="box2-3">3</div>
<div class="Cbox2" id="box2-4">4</div>
</div>
<div id="Fbox">3
<div class="Cbox3" id="box3-1">1</div>
<div class="Cbox3" id="box3-2">2</div>
<div class="Cbox3" id="box3-3">3</div>
<div class="Cbox3" id="box3-4">4</div>
</div>
<div id="Fbox">4
<div class="Cbox4" id="box4-1">1</div>
<div class="Cbox4" id="box4-2">2</div>
<div class="Cbox4" id="box4-3">3</div>
<div class="Cbox4" id="box4-4">4</div>
</div>
</body>
</html>
