flex 中 margin auto 妙用
左右对齐
html
<ul>
<li>导航A</li>
<li>导航B</li>
<li>导航C</li>
<li>导航D</li>
<li class="login">登陆</li>
<li>注册</li>
</ul>css
ul {
display: flex;
}
.login {
margin-left: auto;
}底部吸附
html
<div class="container">
<div class="content">content</div>
<div class="footer"></div>
</div>css
.container {
height: 100vh;
display: flex;
flex-direction: column;
}
.content {
height: 100px;
flex-shrink: 0;
}
.footer {
margin-top: auto;
flex-shrink: 0;
height: 30px;
}试着增加content的height
