Flex：Justify-content：两端的空间但是全尺寸？

Question

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

---

标记式

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

---

图片
即转过这样的东西

进入这个：

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

---

尝试

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

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

3. js hack。嗯，它有效，但我仍然希望有一个干净的方法来实现这一点。

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