用flex和grid分别实现下面一个简单的布局
flex
.wrapper{
display: flex;
flex-flow: row wrap;
height: 35.5rem;
}
.wrapper>div{
border: 0.1rem solid #000;
}
.wrapper>div:nth-child(1){
align-self: flex-start;
min-width: 100%;
height: 15%;
}
.wrapper>div:nth-child(2){
width: 30%;
margin-left: 5%;
}
.wrapper>div:nth-child(3){
width: 60%;
height: 70%;
}
.wrapper>div:nth-child(4){
width: 100%;
height: 15%;
}
grid
.wrapper {
height: 35.5rem;
display: grid;
grid-template-rows: 15% 70% 15%;
grid-template-areas:
"header header header"
"aside main main"
"footer footer footer";
}
.header{
grid-area: header;
border:0.0625rem solid #000;
}
.aside{
grid-area: aside;
border:0.0625rem solid #000;
margin-left: 10%;
}
.main{
grid-area: main;
border:0.0625rem solid #000;
margin-right: 10%;
}
.footer{
grid-area: footer;
border:0.0625rem solid #000;
}
html
<body>
<div class="wrapper">
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>
</div>
</body>
<body>
<div class="wrapper">
<header class="header"></header>
<aside class="aside"></aside>
<main class="main"></main>
<footer class="footer"></footer>
</div>
</body>
嗯。。感觉还是grid布局更方便灵活些
