css - 删除带有包裹子项的 flexbox 上的额外间距？

Question

每当 flexbox 内的元素包裹时，它们往往会拉伸(stretch) 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);
}

See an example on JSFiddle

Answer 1

更新 2

据我所知，所有标准都已达到。

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

变化

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

PLUNKER

---

更新 1

OP 声明固定宽度将不起作用，因为内容(即 flex 元素)可以更改宽度并破坏布局。真正构成固定布局的是外容器是刚性的，具有绝对值测量和/或最大限制长度。固定的、液体的、 react 灵敏的、适应性强的、在白 Wine 中炒的等等都不是真正的问题。真正的问题是，在处理不均匀的行时，行方向的 flexbox 不能很好地处理计算。因此，为了确保内容的统一形成，我发现:

如果您执行下一步，
1. justify-content: space-around 将完美运行。
2. 再添加一个 flex 元素以使行均匀，如果您必须有奇数个 flex 元素，请使用 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>