flex 中 margin auto 妙用

左右对齐

<ul>
  <li>导航A</li>
  <li>导航B</li>
  <li>导航C</li>
  <li>导航D</li>
  <li class="login">登陆</li>
  <li>注册</li>
</ul>

ul {
  display: flex;
}
.login {
  margin-left: auto;
}

底部吸附

<div class="container">
  <div class="content">content</div>
  <div class="footer"></div>
</div>

.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