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来获得我想要的布局

Answer 1

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

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

更新

我希望flex-items能够在内部整齐地分发 flex-container，无论它有多宽。但是，如果 flex-container低于可以包含width的{{1}} 允许的最小间距=每个flex-items的{{1}}，它们应该包裹，向左浮动并与柔性网格对齐

您可以使用margin: 1em使用@Michael_B提供的 here 提供的黑客攻击不会100％工作，但接近于此。

＆＃13;

flex-item

＆＃13;

::after

＆＃13;

更新＃2

是的，看到那个感谢@dippas。不幸的是这种解决方法需要手动设置CSS或编写JavaScript - 我绝对是想要一个纯CSS解决方案。将生成弹性项目动态的，所以我不知道有哪些数字，这是必要的对于Michael_B的解决方案

然后忘记.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>

＆＃13;

flexbox

＆＃13;

inline-block

＆＃13;

Flexbox网格 - 证明：空间并对齐最后的项目

1 个答案:

更新

更新＃2