对齐css-grid或flexbox中的最后一个对象

Question

我正在整理我的代码，我有一个菜单，我想把它组织得更好一些。

有没有一种方法可以使菜单在开始、结束或中心对齐，同时使菜单中的最后一项与结束对齐？

我目前已经剥离了所有的东西，并保留了基本的东西。如果我从最后一个div中删除margin-top: auto，则所有项都会按照.menu css中的说明居中对齐。

如果我保留最后一个div中的margin-top: auto，最后一个div会在我想要的位置对齐，但其他项在顶部对齐，而不是它应该在的位置。

下面是我的代码：

HTML

<div class="header">
  <div class="one">one</div>
  <div class="two">two</div>
</div>
<div class="menu">
  <div class="one">one</div>
  <div class="two">two</div>
  <div class="three">three</div>
</div>

CSS

.header{
  height:70px;
  background: red;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-evenly;
}
.header .one {
  background: blue;
  display: flex;
  align-items: center;
  padding: 0.5rem 1rem;
}
.header .two {
  background: green;
  display: flex;
  align-items: center;
  padding: 0.5rem 1rem;
}

.menu {
  width:70px;
  height: 100vh;
  background: blue;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-evenly;
}
.three {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
}

.menu div:last-of-type {
  margin-top: auto;
}

这就是它的实际作用：Fiddle

Answer 1

添加以下内容，这将起作用。您可能想要添加一个填充来匹配您的标题，在本例中为70px。

.menu {
  padding-top: 70px;
}
.menu div {
  margin-top: auto;
  margin-bottom: auto;
}
.menu div:last-of-type {
  margin-top: auto;
  margin-bottom: 0;
}