左对齐flexbox的最后一行，使用space-between和margin [英] Left-align last row of flexbox using space-between and margins

问题描述

我在容器中有一个未知数的元素，需要在外面没有边距，但是它们之间的边距最小。

我也需要这些是与 space-between 和最后一行左对齐。

我正在尝试这样做如下所示：

.outside {border：1px solid black;} .container {margin：-5px;显示：flex; flex-wrap：wrap; justify-content：space-between;}。container：after {content：''; flex：auto;}。box {background：red;宽度：50px; height：50px; margin：5px;}

< div class =outside > < div class =container> < div class =box>< / div> < div class =box>< / div> < div class =box>< / div> < div class =box>< / div> < div class =box>< / div> < div class =box>< / div> < div class =box>< / div> < div class =box>< / div> < div class =box>< / div> < div class =box>< / div> < div class =box>< / div> < div class =box>< / div> < div class =box>< / div> < div class =box>< / div> < div class =box>< / div> < div class =box>< / div> < div class =box>< / div> < div class =box>< / div> < div class =box>< / div> < div class =box>< / div> < div class =box>< / div> < / div>< / div>

$ b

p>

如果我们不知道将会有多少列（使用flexbox或javascript以外的其他方法），有什么办法可以使它工作吗？ b $ b

解决方案

最后一行对齐方式是flexbox的一个常见问题。

在最后一个可见项之后使用不可见的Flex项目。简而言之，我只是称他们为幻影物品。

.outside {border：1px solid black;}。container {margin：-5px;显示：flex; flex-wrap：wrap; justify-content：space-between;}。container：after {content：''; flex：auto;}。box {background：red;宽度：50px; height：50px; margin：5px;}。hidden {visibility：hidden;保证金：0 5px; height：0;}

 < div class =outside > < div class =container> < div class =box>< / div> < div class =box>< / div> < div class =box>< / div> < div class =box>< / div> < div class =box>< / div> < div class =box>< / div> < div class =box>< / div> < div class =box>< / div> < div class =box>< / div> < div class =box>< / div> < div class =box>< / div> < div class =box>< / div> < div class =box hidden>< / div> < div class =box hidden>< / div> < div class =box hidden>< / div> < div class =box hidden>< / div> < div class =box hidden>< / div> < div class =box hidden>< / div> < div class =box hidden>< / div> < div class =box hidden>< / div> < div class =box hidden>< / div> < div class =box hidden>< / div> < div class =box hidden>< / div> < div class =box hidden>< / div> < div class =box hidden>< / div> < / div>< / div>  

I've got an unknown number of elements in a container that need to wrap with no margins on the outside, but minimum margins between them.

I also need these to be justified with space-between and the last row left aligned.

I'm trying to do this with flexbox like so:

.outside {
  border: 1px solid black;
}
.container {
  margin: -5px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.container:after {
  content: '';
  flex: auto;
}
.box {
  background: red;
  width: 50px;
  height: 50px;
  margin: 5px;
}

<div class="outside">
  <div class="container">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
  </div>
</div>

View JSFiddle

This works correctly, except that the spacing on the last row is off, as you can see in the screenshot:

Is there any way to get this to work if we don't know how many columns there will be (using flexbox or something else other than javascript)?

解决方案

Last row alignment is a common problem with flexbox.

One method to consider is using invisible flex items after the last visible item. For short, I just call them "trailing phantom items".

.outside {
  border: 1px solid black;
}
.container {
  margin: -5px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.container:after {
  content: '';
  flex: auto;
}
.box {
  background: red;
  width: 50px;
  height: 50px;
  margin: 5px;
}

.hidden {
  visibility: hidden;
  margin: 0 5px;
  height: 0;
}

<div class="outside">
  <div class="container">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box hidden"></div>
    <div class="box hidden"></div>
    <div class="box hidden"></div>
    <div class="box hidden"></div>
    <div class="box hidden"></div>
    <div class="box hidden"></div>
    <div class="box hidden"></div>
    <div class="box hidden"></div>
    <div class="box hidden"></div>
    <div class="box hidden"></div>
    <div class="box hidden"></div>
    <div class="box hidden"></div>
    <div class="box hidden"></div>
  </div>
</div>

这篇关于左对齐flexbox的最后一行，使用space-between和margin的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！