css - 柔性 : Justify-content: space-around but full size on both ends?

Question

提示
假设我们想在一个灵活宽度的 div 中分布一行内联 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 应该是它除了分配空间两端各有一半大小的空间之外，同样，这不是我们想要的，但几乎..
   比较:
   
   

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 本身涵盖。目前我们只有 space-around 但它还不完整。ATM 最适合您的解决方案是将行包装在两个伪元素中。基本上这是您的解决方案，但您无需触及实际标记，因为它是生成的内容。

http://jsfiddle.net/5rmUj/

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