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

问题描述

我在容器中有未知数量的元素，需要在外部没有边距但它们之间有最小边距的情况下进行包装.

我还需要用 space-between 和最后一行左对齐来证明这些.

我正在尝试使用 flexbox 来做到这一点:

.outside {边框:1px纯黑色；}.容器 {边距:-5px；显示:弹性；flex-wrap: 包裹;对齐内容:间隔；}.容器:在{之后内容: '';弹性:自动；}.盒子 {背景:红色；宽度:50px；高度:50px；边距:5px；}

<div class="容器"><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>

如果我们不知道会有多少列(使用 flexbox 或除 javascript 之外的其他东西)，有什么方法可以让它工作吗?

解决方案

最后一行对齐是 flexbox 的常见问题.

要考虑的一种方法是在最后一个可见项目之后使用不可见的弹性项目.简而言之，我只是称它们为尾随幻象".

.outside {边框:1px纯黑色；}.容器 {边距:-5px；显示:弹性；flex-wrap: 包裹;对齐内容:间隔；}.容器:在{之后内容: '';弹性:自动；}.盒子 {背景:红色；宽度:50px；高度:50px；边距:5px；}.隐藏{可见性:隐藏；边距:0 5px；高度:0；}

<div class="容器"><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="隐藏框"></div><div class="隐藏框"></div><div class="隐藏框"></div><div class="隐藏框"></div><div class="隐藏框"></div><div class="隐藏框"></div><div class="隐藏框"></div><div class="隐藏框"></div><div class="隐藏框"></div><div class="隐藏框"></div><div class="隐藏框"></div><div class="隐藏框"></div><div class="隐藏框"></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 的最后一行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！