Flex：Justify-content：space-around，但是两端都是全尺寸？

问题描述

提示

假设我们要在一个灵活宽度的div中分配一行inline-block元素，我们考虑第一个和最后一个元素是重要的，应该是间距的一部分。

Prompt
Suppose we want to distribute a row of inline-block elements inside a div of flexible width, we consider the spaces on the far end of the first and last elements to be significant and should be part of the spacing.

标记

<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类似这样



into：



在这种情况下，整个事件缩小到第二行（最宽），所以在该行上的任何框之间没有间距。

但是每个框中的内容可能会有所不同，如果需要，间距应相应调整： br>

---

Picture
I.e. Turn something like this

into this:

In this case, the width of the whole thing shrinks up to the 2nd row (widest) so there's no spacing between any of the boxes on that row.
But the content in each boxes may vary, and the spacing should adjust accordingly if necessary:

尝试：

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

1. justify-content: space-between (or other styling/work-arounds to the same effect):
   Is not what we want.

justify-content：space- around 在两端有半角空格，这也不是我们想要的，但几乎是。

比较：

justify-content: space-around should be it apart from the fact that it distribute the spaces with half-size spaces on either end, which, again, is not what we want, but almost..
Compare:

js hack。嗯，它的工作，但我仍然挂在希望，有一个干净的方式去实施这个。

js hack. Well, it works, but I am still hanging on to the hope that there's a clean way to go about implementing this.

在每行div的开头和结尾添加一个空div，然后使用空格。

也能工作，这是我如何得到上述图片的解决方案。

Adding an empty div at the beginning and the end of every row div and then use space-between.
Also works, and it's how I got the above pictures of the solution. But then I would end up with a bunch of empty divs.

我应该使用表格布局，不是标记）？如果是，如何？

Should I use table layout for this (in css, not in mark-up)? If so, how?

这让我哭泣。我会感谢任何帮助，以清洁的解决方案。

This is making me weep. I would be thankful for any help towards a clean solution to this.

Solution

放置 content：'' :: before :: after 行（这些伪元素是所选择的直接子元素）有效地实现上面的第4点（ $ c> +空元素在两端）没有冗余标记。

Placing content:'' ::before and ::after the rows (these pseudo-elements are direct children of the selected) effectively implements the 4th point above (space-between + empty elements at both ends) without redundant mark-up.

推荐答案

我同意这应该由flexbox本身。
目前我们只有空格，但它只是不完整。
ATM为您提供的最佳解决方案是将行包含在两个伪元素中。基本上是你的解决方案，但是你不需要触摸实际的标记，因为它产生的内容。

I agree this should be covered by flexbox itself.Currently we only have space-around but it's just incomplete.ATM the best solution for you is to wrap rows inside two pseudo elements. Basically it's your solution, but you won't need to touch the actual markup since it's generated content.

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

这篇关于Flex：Justify-content：space-around，但是两端都是全尺寸？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！