html - 如何在 flexbox 中的元素之间创建空间？

Question

我正在尝试使用 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>

标签： htmlcssflexbox

Answer 1

添加margin-right到.img

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