Flexbox 网格 - 对齐：围绕空格并对齐最后一个项目

Posted 2023-03-05

【中文标题】Flexbox 网格 - 对齐：围绕空格并对齐最后一个项目

【英文标题】：Flexbox grid - justify: space-around and aligning last items left

【发布时间】：2016-11-05 15:11:12

【问题描述】：

尝试尽可能简单地设置我的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 的使用方式“遗漏了一些东西”，但遗憾的是，我不得不恢复到旧的 floats 和 clears 以获得我想要的布局。

【问题讨论】：

你不能这样做（一般来说）。每条线都是独立的。 Flexbox 没有网格概念。

可能重复：***.com/q/38000723/3597276

为什么不用空格？我认为它有效。 jsfiddle.net/fdbgef7d

【参考方案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>

---

更新

我希望弹性项目能够在 flex-container，不管它有多宽。但是，如果 flex-container 低于 width 可以包含 flex-items 在 允许的最小间距 = 每个flex-item 的margin: 1em，它们 应该换行，向左浮动并与灵活的网格对齐

您可以使用@Michael_B 提供的here hack，使用::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

是的，谢谢@dippas。不幸的是，这种解决方法 需要手动设置 CSS 或编写 javascript - 我肯定 想要一个纯 CSS 解决方案。将生成弹性项目 动态的，所以我不知道有什么数字，这是必要的 对于 Michael_B 的解决方案

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

【讨论】：

感谢您的回复 - 但这缺少 (a) 灵活容器的功能，您没有手动设置媒体查询的宽度，并且 (b) 弹性项目不是自动水平间距 - 它们在所有行中都向左浮动，不保留灵活间距。我也许应该在我的问题中指定这一点，尽管它在我的示例中。

那么您到底想要什么？一个带有 div 的全屏，或者你想要一个里面有子 div 的“小”容器？很难理解，这就是为什么我在评论中说宽度是可选的

是的，我希望弹性项目能够整齐地分布在弹性容器中，无论它有多宽。但是，如果 flex-container 的宽度低于可以包含 flex-item 的最小间距 = 每个 flex-item 的边距：1em，它们应该环绕、向左浮动并与弹性网格对齐。我希望这很清楚。

是的，感谢@dippas。不幸的是，这种解决方法需要手动设置 CSS 或编写 javascript - 我绝对想要一个纯 CSS 解决方案。弹性项目将动态生成，所以我不知道有多少数字，这对于 Michael_B 的解决方案是必要的。看来我仍然必须回到浮动/清除并使用子元素来实现此功能。

inline-block 选项怎么样？查看更新的答案，否则，媒体查询，忘记浮动/清除