html - Flexbox 网格 - 对齐 : space-around and aligning last items left

Question

尝试尽可能简单地设置我的 flexbox 网格。

我希望 flex-item 始终是 justify: space-around。

但是，一旦 flex-item 换行到下一行，它就应该“向左浮动”以便继续与其余行对齐以上元素。

似乎无法获得 flexbox 属性的正确组合来执行此操作:

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

.flex-item{
  flex: 0 0 200px;
  height: 200px;
  background: blue;
  margin: 1em;
}

.flex-item:after{
  content:'';
  flex-grow: 1000000000;
}

<div class="flex-container">

  <div class="flex-item"></div>
  <div class="flex-item"></div>
  <div class="flex-item"></div>
  <div class="flex-item"></div>
  <div class="flex-item"></div>
  <div class="flex-item"></div>
</div>

产品网格的非常标准的布局行为，对吗？

有人知道我怎样才能做到这一点吗？ 也许我在 flexbox 的使用方式上“遗漏了一些东西”，但遗憾的是我不得不恢复到旧的 float 和 clear s 以获得我想要的此布局。

Answer 1

您无需证明内容的合理性。请改用 margin。

.flex-container {
  display: flex;
  flex-wrap: wrap;
  /*optional*/
  margin: auto;
  max-width: 980px
}
.flex-item {
  flex: 0 0 200px;
  height: 200px;
  background: blue;
  margin: 1em;
}

<div class="flex-container">
  <div class="flex-item"></div>
  <div class="flex-item"></div>
  <div class="flex-item"></div>
  <div class="flex-item"></div>
  <div class="flex-item"></div>
  <div class="flex-item"></div>
</div>

---

更新

I want the flex-items to be able to distribute neatly within the flex-container, no matter how wide it is. However, if the the flex-container gets below a width that can contain the flex-items at the minimum spacing allowed = the margin: 1em of each flex-item, they should wrap, floating left and aligning to the flexible grid

您可以使用提供的技巧 here 作者 @Michael_B，使用 ::after不会 100% 有效，但接近于此。

.flex-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between
}
.flex-container::after {
  content: '';
  height: 0;
  width: 232px
  /* width + 2x(margin: 1em) */
}
.flex-item {
  flex: 0 0 200px;
  height: 200px;
  background: blue;
  margin: 1em;
}

<div class="flex-container">
  <div class="flex-item"></div>
  <div class="flex-item"></div>
  <div class="flex-item"></div>
  <div class="flex-item"></div>
  <div class="flex-item"></div>
  <div class="flex-item"></div>
</div>

---

更新 #2

Yes saw that one thanks @dippas. Unfortunately this work-around requires manually setting CSS or writing javascript - and I definitely want a pure CSS solution. The flex-items will be generated dynamically, so I can't know what number there are, which is necessary for Michael_B's solution

然后忘记flexbox因为它不能做你想做的，就用inline-block

.flex-item {
  display: inline-block;
  width: 200px;
  height: 200px;
  background: blue;
  margin: 1em;
}

<div class="flex-container">
  <div class="flex-item"></div>
  <div class="flex-item"></div>
  <div class="flex-item"></div>
  <div class="flex-item"></div>
  <div class="flex-item"></div>
  <div class="flex-item"></div>
  <div class="flex-item"></div>
  <div class="flex-item"></div>
</div>