Correcting teacher:天蓬老师
Correction status:unqualified
Teacher's comments:代码复制一下就提交, 这样的作业有什么意义?
作业是分开发表的博客, 任何人可见, 不只只有你和我, 想一下这样的博客能给访客带来什么信息?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>flex homework</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
width: 90vw;
height: 100vh;
margin: 0 auto;
}
.container {
display: flex;
outline: 1px solid red;
flex-flow: row wrap;
justify-content: space-between;
align-content: space-between;
height: 100vh;
}
.container > .item:first-of-type,
.item:last-of-type {
flex: 0 0 90vw;
background-color: lightcyan;
height: 10vh;
min-height: 80px;
}
.container > .item2,
item3,
item4 {
height: 80vh;
min-height: 400px;
}
.container > .item2,
.item4 {
flex: 0 0 20vw;
background-color: lightyellow;
}
.container > .item2 {
justify-content: flex-start;
}
.container > .item4 {
justify-content: flex-end;
}
.container > .item3 {
flex: 1 1 auto;
background-color: lightred;
}
</style>
</head>
<body>
<div class="container">
<div class="item item1">弹性盒子布局header</div>
<div class="item item2">left</div>
<div class="item item3">main</div>
<div class="item item4">right</div>
<div class="item item5">footer</div>
</div>
</body>
</html>