使用间距和边距左对齐弹性框的最后一行[重复]

Question

我的容器中有未知数量的元素需要包装，外部没有边距，但它们之间的边距最小。

我还需要用space-between 和最后一行左对齐来证明这些是合理的。

我正在尝试像这样使用 flexbox 来做到这一点：

.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

这可以正常工作，只是最后一行的间距是关闭的，如您在屏幕截图中所见：

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

Answer 1

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

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

.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>

Answer 2

Stack Overflow 不允许我对 Michael_B 的回答发表评论，但我确实想说明如何使用 JavaScript 为任何试图解决此问题的人计算要附加的幻像元素的数量。

  /**
   * @param {Integer} numElements The number of elements you're displaying.
   * @param {Number} element Width Width, in pixels, of each element.
   * @param {Number} margin Width, in pixels. Your minimum target margin between items. 2x the margin on each individual item.
   * @param {Number} containerWidth Width, in pixels, of the containing element.
   */
  const getNumPhantomElements = ({numElements, elementWidth, margin, containerWidth}) => {
    const elementsPerRow = Math.floor(containerWidth / (elementWidth + margin));
    const elementsInLastRow = numElements % elementsPerRow;
    const numPhantomElements = elementsPerRow - elementsInLastRow;

    return numPhantomElements;
  };

在这种情况下：

const containerWidth = document.querySelector('.container').offsetWidth;
const numPhantomElements = getNumPhantomElements({
  numElements: 21,
  elementWidth: 50,
  margin: 10, // 2x 5px margin on each box
  containerWidth
}); // Append this many elements (output depends on your viewport size)

Answer 3

Michael 说得对，问题是你不能做space-between 然后选择最后一行是flex-start。不过，对我来说突出的部分是指定的宽度。这很重要吗？

如果没有，通常的方法是使用媒体查询来控制每行显示多少项目。您可以设置许多媒体查询步骤以确保项目不会拉伸太多，但这样一来，您的正常网格排水沟之间的空间就会更紧密地对齐，并且它会使“最后一行问题”消失。觉得这样行吗？

示例：http://codepen.io/anon/pen/JbpPKa