CSS "display:flex" 添加一些不需要的 space

Question

就是下图，我们有一个div容器包含5个项目（图标+文字）。我想使用 flexbox 显示这 5 个项目，每列总是 3 个项目。为此，我们可以添加 flex-direction:column、flex-wrap:wrap 并指定高度。

但是，我希望 div 容器能够自动调整其高度以适应 3 个项目的高度。因此，例如，项目高度为 10px。然后，div 容器应该自动具有 30px 的高度。

我希望优先使用 flexbox 进行响应（以便更好地理解它们），但我对其他方法持开放态度。

谢谢

Answer 1

你在主设备上试过吗css

    *,*::before,*::after{
    padding: 0;
    margin: 0;
    box-sizing:border-box}

如果您没有添加这段代码，可能就是这个原因。因为默认情况下，css 项具有我们无法轻易观察到的额外填充和边距。

编辑：您尝试过我的解决方案吗？如果您尝试过但没有成功，请告诉我。

Answer 2

Flexbox 以相反的方式工作，它会对其父大小做出反应。我建议在这里使用网格：

div {
 background: purple;
}

ul {
 display: grid;
 grid-template-columns: repeat(2, 1fr);
 grid-template-rows: repeat(3, 1fr);
}

<div>
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
  </ul>
</div>

CSS "display:flex" adds some unwanted space