html - 在 div 中垂直间隔元素(flexbox space-around 不起作用..)

Question

这是我的侧面导航图片。我想更好地控制在导航中均匀分布这些元素(顶部和底部的空间比图像中显示的更多)。

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

这里是相关代码(使用网格，这里没有包含，以及来自 Materialise 的“网格”模块，它为我格式化文本等提供了一些帮助):

.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>

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

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

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

Answer 1

对此的解决方案是将 flex 子项的 flex 属性设置为 1。当这个属性设置在一个灵活的元素上时，它会使所有元素的长度相同。如果你也给 flex child 的顶部和底部添加填充，你可以玩弄高度的感知。该片段显示父 flex 的高度为 400 像素。您可以调整高度，看看它如何保持周围空间的间距。

.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>