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

Posted 2023-03-05

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

【英文标题】：Vertically spacing items in a div (flexbox space-around not working..)

【发布时间】：2019-09-05 23:14:08

【问题描述】：

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

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 之间。

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

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

【问题讨论】：

图片不包含任何代码。这只是我的元素。为清晰起见进行了编辑。但是感谢您的贡献。

确保您的容器的高度超出了内容的高度，或者没有多余的空间可以分配。 ***.com/q/55674798/3597276

【参考方案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;

【参考方案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>

【讨论】：

谢谢！一个跟进，虽然。当我使用您提供的代码时，它不会跨越导航侧边栏的全长 - here's an example of that。当我删除 .nav-side-wrapper 中的高度值并稍微调整一些东西时，它跨越了整个长度 - like this - 但它太分散了。您是否知道我可以控制这些元素周围/之间的空间？基本上，在最顶部的链接和导航的顶部，以及底部的按钮和导航的底部之间的空白空间较少。

我能想到的就是玩弄 .nav-side 类的顶部和底部填充。我更改了 sn-p 以为此使用百分比，而不是固定的 px。对于不同的设备，这可能是一个更好的解决方案。如果这不是您正在寻找的解决方案，我会坚持一段时间。我敢肯定，一些天才会带来更好的东西。