使用间距和边距左对齐flexbox的最后一行

Question

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

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

我尝试使用flexbox这样做：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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

迈克尔是对的，问题是你无法space-between，然后选择最后一行为flex-start。虽然是指定的宽度，但是向我伸出的部分。这很重要吗？

如果没有，通常的方法是使用媒体查询来控制每行显示的项目数。您可以设置许多媒体查询步骤，以确保项目不会拉伸太多，但这样的方式之间的空间更紧密地与您的正常网格排水沟对齐，这会导致＆＃34;最后一行问题＆＃ 34;走开。认为这会有效吗？

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

Answer 3

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)