无法与flexbox分离

可以使用flexbox的flex-wrap属性来解决该问题。默认情况下，flex项会紧密地排列在容器内，并且会在必要时缩小以适应屏幕。设置flex-wrap: wrap;将允许flex项在容器内换行，并且可以通过添加padding和边距来实现分离样式。

示例代码：

HTML:

<div class="container">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
  <div class="item">Item 4</div>
  <div class="item">Item 5</div>
  <div class="item">Item 6</div>
</div>

CSS:

.container {
  display: flex;
  flex-wrap: wrap;
}

.item {
  width: 30%;
  height: 100px;
  background-color: #f7f7f7;
  margin: 10px;
  box-sizing: border-box;
}

在上述示例中，我们设置了.container的display属性为flex，这将使其成为flex容器。然后，通过设置flex-wrap: wrap;属性，我们告诉flex容器在需要时换行。最后，我们添加了一些样式来设置.item的宽度、高度和边距，以使它们分离。