参考网络教程写的demo
<html>
<head>
<title>holy_grail</title>
<style>
* {
margin: 0;
padding: 0;
text-align: center;
text-justify: center;
justify-content: center;
font:40px black YaHei;
}
header,
footer {
text-align: center;
flex: 1 0 10vh;
background-color: blue;
}
.main div {
border: solid 1px gray;
border-radius: 2px;
}
.main {
min-height: 100vh;
display: flex;
flex-direction: column;
flex: 1;
}
.main>div {
display: flex;
flex-direction: row;
background-color: green;
min-height: 72vh;
}
.main>div>div{
flex: 1;
display: flex;
}
.main>div>div:nth-child(1) {
flex: 0 0 20%;
flex-wrap: wrap;
}
.main>div>div:nth-child(1)>div {
display: inherit;
justify-content: center;
flex-direction: column;
/* height: 10%; */
width: 100%;
}
.main>div>div:nth-child(1)>div:nth-of-type(3) {
order: -1;
}
.main>div>div:nth-child(1)>div:nth-of-type(4) {
order: 1;
}
.main>div>div:nth-child(1)>div:nth-of-type(5) {
order: 2;
}
.main>div>div:nth-child(2) {
display: inherit;
}
.main>div>div:nth-child(3) {
flex: 0 0 20%;
}
</style>
</head>
<body>
<div class="main">
<header>head</header>
<div>
<div>
<div>menu1</div>
<div>menu2</div>
<div>menu3</div>
<div>menu4</div>
<div>menu5</div>
<div>menu6</div>
<div>menu7</div>
<div>menu8</div>
</div>
<div>center</div>
<div>right</div>
</div>
<footer>foot</footer>
</div>
</body>
</html>