在 div 中垂直间隔项目（flexbox space-around 不起作用..）

Question

这是我的侧导航的图像。我想更好地控制在导航中均匀分布这些项目（顶部和底部的空间比图像中显示的要多）。

Image of the side nav elements, with grid and Materialize formatting things correctly.

这里是相关代码（使用网格，这里不包括，以及来自 Materialize 的“网格”模块，它为我格式化文本等提供了一些帮助）：

.nav-side-wrapper {
  display: flex;
  flex-direction: column;
}

.nav-side {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  width: 100%;
}

.side-nav-links {
    border-bottom: 2px solid;
}

<nav class="valign-wrapper nav-side-wrapper">
        <div class="container nav-side">
            <ul class="side-nav-links center-align">
                <li><a href="learning">Learning Hub</a></li>
                <li><a href="resources">Resources</a></li>
                <li><a href="glossary">Glossary</a></li>
            </ul>
            <ul class="center-align side-buts">
                <li><button class="but-test">Click me!</button></li>
                <li><button class="but-test">Click me!</button></li>
                <li><button class="but-test">Click me!</button></li>
            </ul>
        </div>
    </nav>

我已经尝试了所有组合，从 Materialize 中删除了 valign-wrapper 和 center-align 助手，移动了 flex 代码（显示、flex-direction、justify-content 等），似乎尝试了哪些行之间的所有组合去哪里，在 .nav-side-wrapper 和 .nav-side 之间。

这真的难倒我...任何帮助将不胜感激。

理想情况下，我希望链接沿导航的上半部分分布，而按钮沿导航的下半部分均匀分布。

Answer 1

尝试添加你的 CSS

.nav-side {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  height: 100%;
  width: 100%;
}
.side-buts{
    display: flex;
    justify-content: space-around;
      flex-direction: column;

}

Answer 2

解决这个问题的方法是在 flex 子节点上将 flex 属性设置为 1。当这个属性被设置在一个灵活的项目上时，它将使所有项目的长度相同。如果您也为 flex 子项的顶部和底部添加填充，您可以随意调整高度的感知。 sn-p 显示父 flex 的高度为 400px。您可以使用高度来查看它如何保留空间间距。

.nav-side-wrapper {
  height: 400px;
  width: 30%;
  display: flex;
  flex-direction: column;
  background-color: pink;
  justify-content: space-around;
}

.nav-side {
  display: flex;
  -webkit-flex: 1;
  /* Safari 6.1+ */
  -ms-flex: 1;
  /* IE 10 */
  flex: 1;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  padding: 10% 0px;
}

hr {
  border: none;
  background-color: black;
  height: 2px;
  width: 90%;
}

<nav class="nav-side-wrapper">
  <div class="nav-side">
    <div><a href="learning">Learning Hub</a></div>
    <div><a href="resources">Resources</a></div>
    <div><a href="glossary">Glossary</a></div>
  </div>
  <div>
    <hr>
  </div>
  <div class="nav-side">
    <div><button class="but-test">Click me!</button></div>
    <div><button class="but-test">Click me!</button></div>
    <div><button class="but-test">Click me!</button></div>
  </div>
</nav>