删除包装的 Flexbox 上的行之间的空格 [重复]答案

【问题标题】：Remove whitespace between rows on wrapped Flexbox [duplicate]删除包装的 Flexbox 上的行之间的空格 [重复]
【发布时间】：2020-02-02 18:27:37
【问题描述】：

我希望删除水平列表 flexbox 上的行之间的空白。我实际上是在做一个 a-z 列表，我希望它没有下面的空格。

这是我所做的：

#example 
{
  display: block;
  margin-left: auto;
  margin-right: auto;
  background-color:#555;
  color: white;
}
#example ol
{
    display:flex;
    /*justify-content: center;
    justify-content: space-between;
    flex: 1 ;*/
    flex-shrink: 0;
    flex-flow: row wrap;
    justify-content: space-between;
    align-items:flex-start;
    /*align-self: center;*/
    /*align-content:flex-start;*/


}
#example ol li::marker
{
    margin-right:5px; 

}
#example ol li
{
    color:white;
    font-size:40px; 
    list-style-position:inside;
    margin-bottom: 20px;
}
#example ul li
{
    color:white;
    font-size:20px;
    margin-bottom:20px;
}

Whitespace between list items

提前致谢

【问题讨论】：

您能否将 html 添加到您的帖子中以便重现该问题？

标签： html css flexbox whitespace

【解决方案1】：

也许我错了，但我不认为你可以通过flex 实现这一点。您可以尝试在儿童上使用float: left;，但您仍然会在某些地方的内容下方出现该空间。

您可以在 JS 中查找 Masonry 布局解决方案。

或者您可以使用column-count: 3;，它会删除那些空格，但它会像这样工作：

A D G
B E H
CF J

（像报纸一样从上到下）

我在 ul 中添加了这两个规则来阻止这些块在列之间的划分。

  display: inline-block;
  width: 100%;

.wrapper {
  column-count: 3;
}

.wrapper ul {
  display: inline-block;
  width: 100%;
  list-style: none;
  padding: 0;
  margin: 0 0 1em;
}

<div class="wrapper">
  <ul>
    <li>List 1 - child</li>
    <li>List 1 - child</li>
    <li>List 1 - child</li>
    <li>List 1 - child</li>
    <li>List 1 - child</li>
    <li>List 1 - child</li>
  </ul>
  <ul>
    <li>List 2 - child</li>
    <li>List 2 - child</li>
    <li>List 2 - child</li>
  </ul>
  <ul>
    <li>List 3 - child</li>
    <li>List 3 - child</li>
    <li>List 3 - child</li>
    <li>List 3 - child</li>
    <li>List 3 - child</li>
  </ul>
  <ul>
    <li>List 4 - child</li>
    <li>List 4 - child</li>
    <li>List 4 - child</li>
    <li>List 4 - child</li>
    <li>List 4 - child</li>
  </ul>
  <ul>
    <li>List 5 - child</li>
    <li>List 5 - child</li>
    <li>List 5 - child</li>
  </ul>
  <ul>
    <li>List 6 - child</li>
    <li>List 6 - child</li>
  </ul>
  <ul>
    <li>List 7 - child</li>
    <li>List 7 - child</li>
    <li>List 7 - child</li>
    <li>List 7 - child</li>
    <li>List 7 - child</li>
  </ul>
  <ul>
    <li>List 8 - child</li>
    <li>List 8 - child</li>
    <li>List 8 - child</li>
    <li>List 8 - child</li>
  </ul>
  <ul>
    <li>List 9 - child</li>
    <li>List 9 - child</li>
    <li>List 9 - child</li>
    <li>List 9 - child</li>
    <li>List 9 - child</li>
    <li>List 9 - child</li>
    <li>List 9 - child</li>
    <li>List 9 - child</li>
  </ul>
  <ul>
    <li>List 10 - child</li>
    <li>List 10 - child</li>
  </ul>
</div>

【讨论】：

【解决方案2】：

我不确定原始 HTML 标记是什么样子，但我注意到如果删除空格，您不会保留原始网格，因为每个元素的高度现在都适合内容。

如果这是您想要的，我可能会建议 1) 使所有子元素内联，以便它们折叠并仅填充必要的空间，或者 2) 如果即使视口发生变化，列中的内容也保持不变，那每列都放置在自己的容器中，然后给定一个最小高度。

【讨论】：