如何垂直对齐列出的项目？

Question

在以下示例中，如何让左侧的菜单项垂直对齐。我希望它们从顶部菜单的底部均匀分隔到浏览器的底部。

要记住的一些事情：

• 一旦显示侧面菜单，它应滚动屏幕。
• h1应位于内容区域的中心

.TopMenuBar {
  border: 1px solid purple;
  background-color: purple;
  width: 100%;
  margin: 0;
  padding: 0;
}
.TopMenuBar ul {
  list-style-type: none;
  display: flex;
  justify-content: space-between;
  margin: 0;
  padding: 0;
}
.TopMenuBar li {
  display: inline;
  padding: 20px;
}
.TopMenuBar li a {
  color: white;
  text-decoration: none;
  padding: 20px;
}
.TopMenuBar li a:hover {
  background-color: #b14eb1;
  color: black;
}
.SideMenuBar {
  background-color: orange;
  margin-left: 20px;
  margin-top: 0;
  display: flex;
  height: 100vh;
  float: left;
}
.SideMenuBar ul {
  padding: 0;
  margin: 0;
  list-style-type: none;
  justify-content: space-between;
}
.SideMenuBar li a {
  color: white;
  text-decoration: none;
  padding-left: 20px;
  padding-right: 20px;
  display: list-item;
}
.SideMenuBar li a:hover {
  background-color: #fcbf7e;
  color: black;
}
main {
  padding-left: 10px;
  display: table
}
h1 {
  text-align: center;
}

<img src="#" width="100%" height="100px">
<div class="TopMenuBar">
  <ul>
    <li><a href="#">Side</a>
    </li>
    <li><a href="#">Menu</a>
    </li>
    <li><a href="#">Bar</a>
    </li>
  </ul>
</div>

<div class="SideMenuBar">
  <ul>
    <li><a href="#">Side</a>
    </li>
    <li><a href="#">Menu</a>
    </li>
    <li><a href="#">Bar</a>
    </li>
  </ul>
</div>


<h1>h1 Header</h1>
<main>
  <h2>h2 Header</h2>
  <p>Main paragraph</p>
  <a href="#">Main link</a>
  <ul>
    <li>Main list item</li>
    <li>Main list item</li>
    <li>Main list item</li>
  </ul>
  <h2>h2 Header</h2>
  <p>Main paragraph</p>
  <a href="#">Main link</a>
  <ul>
    <li>Main list item</li>
    <li>Main list item</li>
    <li>Main list item</li>
  </ul>
</main>

Answer 1

将弹性显示添加到.SideMenuBar ul
justify-content: space-around - 如果您不希望它们触及顶部/底部边缘。

.TopMenuBar {
  border: 1px solid purple;
  background-color: purple;
  width: 100%;
  margin: 0;
  padding: 0;
}

.TopMenuBar ul {
  list-style-type: none;
  display: flex;
  justify-content: space-between;
  margin: 0;
  padding: 0;
}

.TopMenuBar li {
  display: inline;
  padding: 20px;
}

.TopMenuBar li a {
  color: white;
  text-decoration: none;
  padding: 20px;
}

.TopMenuBar li a:hover {
  background-color: #b14eb1;
  color: black;
}

.SideMenuBar {
  background-color: orange;
  margin-left: 20px;
  margin-top: 0;
  display: flex;
  height: 100vh;
  float: left;
}

.SideMenuBar ul {
  padding: 0;
  margin: 0;
  list-style-type: none;
  justify-content: space-between;
  display: flex; /*add*/
  flex-direction: column; /*add*/
}

.SideMenuBar li a {
  color: white;
  text-decoration: none;
  padding-left: 20px;
  padding-right: 20px;
  display: list-item;
}

.SideMenuBar li a:hover {
  background-color: #fcbf7e;
  color: black;
}

main {
  padding-left: 10px;
  display: table
}

h1 {
  text-align: center;
}

<img src="#" width="100%" height="100px">
<div class="TopMenuBar">
  <ul>
    <li><a href="#">Side</a></li>
    <li><a href="#">Menu</a></li>
    <li><a href="#">Bar</a></li>
  </ul>
</div>

<div class="SideMenuBar">
  <ul>
    <li><a href="#">Side</a></li>
    <li><a href="#">Menu</a></li>
    <li><a href="#">Bar</a></li>
  </ul>
</div>


<h1>h1 Header</h1>
<main>
  <h2>h2 Header</h2>
  <p>Main paragraph</p>
  <a href="#">Main link</a>
  <ul>
    <li>Main list item</li>
    <li>Main list item</li>
    <li>Main list item</li>
  </ul>
  <h2>h2 Header</h2>
  <p>Main paragraph</p>
  <a href="#">Main link</a>
  <ul>
    <li>Main list item</li>
    <li>Main list item</li>
    <li>Main list item</li>
  </ul>
</main>