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中,而不是在标记中)？如果是这样,怎么样？

这让我哭泣.我会感谢任何有助于实现清洁解决方案的帮助.

这是一个小提琴的链接

---

解

小提琴

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