初步接触flex，话不多说，效果图如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style>
.box{
display: flex;
flex-direction: column;
min-height: 100vh;/*100vh == height:100%,元素撑开与屏幕等高*/
}
.content{
flex: 1;
}
.footer{
width: 100%;
height: 50px;
border: 1px solid black;
display: flex;
flex-direction: row;
display: flex;
}
.nav{
flex:1;/*等分*/
border: 1px solid red;
}
</style>
<body>
<div class="box">
<div class="content">index</div>
<div class="footer">
<div class="nav">第一</div>
<div class="nav">第二</div>
<div class="nav">第三</div>
</div>
</div>
</body>
</html>
3311
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
