在包裹了孩子的flexbox上消除多余的间距？

Question

每当flexbox中的项目包装时，它们往往会拉伸flexbox，并在侧面留下多余的空间。仅当物品包装时才会发生。我如何摆脱多余的空间？

问题的屏幕截图

我想要它做什么

码

的HTML

<div>
  <div class="red">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </div>
  <div class="green">
    <div></div>
  </div>
</div>

的CSS

body > div {
  display: flex;
  width: 34rem;
  justify-content: space-between;
  border: 1px solid black;
}

body > div > div {
  display: flex;
  flex-flow: row wrap;
}

body > div > div.red {
  background: rgba(255, 0, 0, .1);
}

body > div > div.green {
  background: rgba(0, 255, 0, .1);
  flex-shrink: 0;
}

body > div > div > div {
  margin: 1rem;
  height: 5rem;
  width: 5rem;
  background: rgba(0, 0, 0, .1);
}

查看有关JSFiddle的示例

Answer 1

更新2

据我所知，所有标准均已满足。

• 无固定宽度
• 适应各种宽度的内容
• 没有过多的填充

变化

• 红色框justify-content: space-between减少了红色框左右两侧的填充。
• 每个 Flex 项目（Flex-Ghost 除外）都是flex: 0 0 auto.
• Flex-ghost 现在是纯宽度，没有高度flex: 2 0 auto。
• 添加了一点 JS 使其具有交互性。

笨蛋

更新1

OP 指出，固定宽度不起作用，因为内容（即弹性项目）可以更改宽度并破坏布局。真正构成固定布局的是外容器是刚性的，具有绝对值测量和/或最大极限长度。固定的、流动的、反应灵敏的、适应性强的、用白葡萄酒炒的等等都不是真正的问题。真正的问题是，行方向的 Flexbox 在处理不均匀的行时不能很好地处理计算。因此，为了确保内容的统一形成，我发现：

1. justify-content: space-around如果您执行下一步，将会完美地工作。
2. 再添加一个弹性项目以使行均匀，如果必须有奇数数量的弹性项目，请使用 或 使最后一项不visibility: hidden可见opacity: 0，但不 display: none

详细信息在 JS 区域（没有添加 JS，只是用于注释的空间）。

片段

/* Changes
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
CSS
line 1 to 8
|| Needed basic reset
=====================
line 12
|| To demonstrate behavior in liquid layout.
=====================
line 19 to 24
|| Needed some type of measurement, otherwise it 
|| will expand to fill in that extra space on 
|| the right.
|| flex was set to shrink when width has reached
|| it's basis of 62%.
======================
line 22 to 28
|| Width and flex growth/shrink/basis were added
|| for the same reasons as explained of the 
|| prior ruleset.
|| max-width: 380px is the limit for the red 
|| box before the content is askew.
|| justify-content: space-around was added in 
|| order to stabilize it's width.
======================
line 11, 31 to 33
|| Changed rem units to em because it's ideal for
|| a responsive layout. Although rem is a 
|| relative measurement like it's sister
|| property, em, it's based on the root's default
|| so directly changing that measurement will
|| yield a change, whilst with em, only the 
|| container (or parent) needs to resize on the 
|| fly.
======================
line 44 to 46
|| This ghost flex item is the key to the red 
|| boxes' content being able to maintain a 
|| uniformed layout.
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
HTML
line 8
|| Added an extra div in div.red to be the ghost
|| flex item. Flex items will exhibit a uniform 
|| behavior when there are an equal amount of
|| them in each row.
*/

html,
body {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body > div {
  display: flex;
  width: 100vw;
  justify-content: space-between;
  border: 1px solid black;
}

body > div > div {
  display: flex;
  flex-flow: row wrap;
}

body > div > div.red {
  background: rgba(255, 0, 0, .1);
  flex: 0 1 62%;
  min-width: 60%;
  justify-content: space-around;
}

body > div > div.green {
  background: rgba(0, 255, 0, .1);
  justify-content: space-around;
  flex: 0 1 22%;
  width: 20%;
}

body > div > div > div {
  margin: 1em;
  height: 5em;
  width: 4em;
  background: rgba(0, 0, 0, .1);
}

div.red > div:last-of-type {
  opacity: 0;
}

<div>
  <div class="red">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </div>
  <div class="green">
    <div></div>
  </div>
</div>

Answer 2

会设置max-width一个body > div > div.red会达到您想要的效果吗？

JSFiddle