如何在 flexbox 中的元素之间创建空间？答案

【问题标题】：How do I create space between elements in flexbox?如何在 flexbox 中的元素之间创建空间？
【发布时间】：2026-01-23 08:15:01
【问题描述】：

我正在尝试使用 flexbox 为该网站创建布局，但 justify-content 属性似乎不起作用。最终，我希望它看起来像这样：

我的网格布局正确，但此时无法在元素之间留出空间。这就是我现在所拥有的：

如何正确对齐我的内容？这是我的代码笔：https://codepen.io/caseycling/pen/poNXRXZ

.service-container {
  display: flex;
  justify-content: center;
}

.img {
  margin: .5rem;
  border: 1px solid grey;
  min-width: 100px;
}

.container>div {
  border: 1px solid grey;
  min-height: 100px;
  min-width: 100px;
  text-align: center;
}

.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around; //Not working
}

.service {
  flex: 40%;
  margin: .5rem;
}

<div class='service-container'>
  <div class='img'>IMG</div>

  <div class='container'>
    <div class='service'>Service</div>
    <div class='service'>Service</div>
    <div class='service'>Service</div>
    <div class='service'>Service</div>
  </div>
</div>

【问题讨论】：

使用gap: 10px;。

标签： html css flexbox

【解决方案1】：

我认为这是因为您将space-around 附加在错误的位置。现在你在container 上找到了它，它只是左边的矩形。此属性将影响内部的一切，但不会影响外部。您应该将此道具添加到最高包装器，在本例中为service-container

.service-container {
  display: flex;
  justify-content: space-around; // working here
}

【讨论】：

【解决方案2】：

您的主要 flex 容器已应用 justify-content: center。

您似乎不想将项目居中。您希望它们像您的图像中那样分开。

所以使用justify-content: space-between。

但如果您仍希望布局居中，请为容器设置宽度并使用margin 属性。

.service-container {
  display: flex;
  justify-content: space-between;
  width: 800px;
  margin: 0 auto;
}

.img {
  margin: .5rem;
  border: 1px solid grey;
  min-width: 100px;
}

.container>div {
  border: 1px solid grey;
  min-height: 100px;
  min-width: 100px;
  text-align: center;
}

.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around; //Not working
}

.service {
  flex: 40%;
  margin: .5rem;
}

<div class='service-container'>
  <div class='img'>IMG</div>

  <div class='container'>
    <div class='service'>Service</div>
    <div class='service'>Service</div>
    <div class='service'>Service</div>
    <div class='service'>Service</div>
  </div>
</div>

【讨论】：

【解决方案3】：

将margin-right 添加到.img

.img {
    margin: .5rem;
    border: 1px solid grey;
    min-width: 100px;
    margin-right: 100px; // Increase space between image and servies
}

【讨论】：