以下是前端开发中,常见的几种页面布局,使用flex实现
1.布局一
<div class="container">
<header>header</header>
<article>mian</article>
<footer>footer</footer>
</div>
.container {
min-height: 100vh;
display: flex;
flex-direction: column;
}
header {
background-color: #666;
height: 80px;
}
article {
background-color: #ccc;
flex: auto;
}
footer {
background-color: #666;
height: 150px;
}
2.布局2
<div class="container">
<header>头部</header>
<div class="box">
<aside>侧边栏</aside>
<article>主体区域</article>
</div>
<footer>底部</footer>
</div>
.container {
min-height: 100vh;
display: flex;
flex-direction: column;
}
header {
background-color: #666;
height: 80px;
}
.box {
flex: auto;
background-color: #f5f5f5;
display: flex;
}
aside {
background-color: aqua;
width: 80px;
}
article {
background-color: #ff3040;
flex: auto;
}
footer {
background-color: #666;
height: 150px;
}
3.布局3
<div class="container">
<aside>侧边栏</aside>
<div class="box">
<header>头部</header>
<article>主体区域</article>
<footer>底部</footer>
</div>
</div>
.container {
min-height: 100vh;
display: flex;
}
aside {
background-color: aqua;
width: 80px;
}
.box {
display: flex;
flex: auto;
flex-direction: column;
}
header {
background-color: #666;
height: 80px;
}
article {
background-color: #ff3040;
flex: auto;
}
footer {
background-color: #666;
height: 150px;
}