Flex: Justify-content: 空间环绕但两端全尺寸？

Question

提示
假设我们想在一个灵活宽度的 div 内分配一行 inline-block 元素，我们认为第一个和最后一个元素远端的空间很重要，应该是间距的一部分。

---

标记

<div id="whole-thing">
<!-- inline-block element, width shrinks to widest row -->
    
    <div id="row1" class="row">
    <!-- block element (100% width) -->

        <div id="box1" class="box">
        <div id="box2" class="box">
        ..
    </div>
    <div id="row2" class="row">
        ..
    </div>
    ..
</div>

---

图片
IE。转成这样

进入这个：

在这种情况下，整个事物的宽度会缩小到第二行（最宽），因此该行上的任何框之间都没有间距。
但每个方框内的内容可能会有所不同，必要时间距应相应调整：

---

尝试

1. justify-content: space-between（或其他具有相同效果的样式/解决方法）：
   不是我们想要的。

2. justify-content: space-around 应该是除了它分配空间with half-size spaces on either end 的事实之外，这又不是我们想要的，但几乎是..
   比较：
   
   

3. js 破解。嗯，它有效，但我仍然希望有一种干净的方式来实现它。

4. 在每行div的开头和结尾添加一个空div，然后使用space-between。
   也有效，这就是我获得上述解决方案图片的方式。但是我最终会得到一堆空的 div。

我应该为此使用表格布局（在 css 中，而不是在标记中）？如果有，怎么做？

这让我哭了。我将感谢您为解决此问题提供任何帮助。

Here's a link to fiddle

---

Solution

Fiddle

放置 content:'' ::before 和 ::after 行（这些伪元素是选定的直接子元素）有效地实现了上面的第 4 点（space-between + 两端的空元素），没有多余的标记.

Answer 1

我同意这应该由 flexbox 本身涵盖。 目前我们只有空间，但它只是不完整的。 ATM 对您来说最好的解决方案是将行包装在两个伪元素中。基本上这是您的解决方案，但您无需触摸实际标记，因为它是生成的内容。

http://jsfiddle.net/5rmUj/

.row::before, .row::after
{
    content:'';display:block;
    width:0;height:0;
    overflow:hidden;
}