在 flex 布局中为最后一行包装项目，对齐之间有空格答案

【问题标题】：Wrap items for last row in flex layout with space between alignment在 flex 布局中为最后一行包装项目，对齐之间有空格
【发布时间】：2019-06-24 03:39:05
【问题描述】：

有没有什么方法可以在对齐之间有空格的行中包装项目，最后一行没有大的间隙？

<div fxFlex="row wrap" fxLayoutAlign="space-around">
    <my-item *ngFor="let item of items"></my-item>
</div>

实际行为：

与其他行相比，我在最后一行需要相同的“空格”。

【问题讨论】：

存在“大差距”是因为您的最后一行只有 3 个项目。他们之间的距离仍然是均匀的。你期望发生什么？
您能否使用以下准则使用代码编辑您的帖子：Minimal, Complete, and Verifiable examples
你有它的 HTML 结构吗？只是想知道每行是否都在同一个父级或不同的父级内？

标签： html angular css flexbox

【解决方案1】：

获得所需内容的最快方法是在最后一个可见元素之后添加一个空元素：

<!-- your last 3 boxes -->
<div class="gray-box">
  (your content)
</div>

<div class="gray-box">
  (your content)
</div>

<div class="gray-box">
  (your content)
</div>

<!-- an empty box - make sure .transparent has opacity: 0-->
<div class="gray-box transparent"></div>

如果您可以不使用 flexbox，display: grid 更符合您的要求，您可以更严格地定义网格大小：

display: grid;
grid-template-columns: repeat(4, 25%);
grid-gap: /* gap between your items */

【讨论】：

【解决方案2】：

您可以使用“填充”元素。您需要在列表末尾有 3 个不可见的元素。每次当您的行打破填充物时，有助于保持正确的尺寸和空间。

const addbutton = document.getElementsByClassName('add');

// referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling);

const addEl = () => {
  const newli = document.createElement('li');
  newli.textContent = 'new flex child';
  const pos = document.querySelector('li.filler');
  pos.parentNode.insertBefore(newli, pos.previousElementSibling.nextSibling);
}

addbutton[0].addEventListener('click', addEl);

body {
  display: flex;
}

ul {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
  padding: 0;
  flex: 1;
}

ul>li {
  flex: 0 1 24%;
  background: #ccc;
  display: block;
  height: 40px;
  margin-bottom: 20px;
}

ul>li.filler {
  height: 0;
  padding: 0;
}

button {
  background: #333;
  color: white;
  border: none;
  padding: 5px;
  flex: 0 0 100px;
  height: 100px;
  margin: 10px;
}

<button class="add">click here to add childs</button>
<ul>
  <li>lorem</li>
  <li>lorem</li>
  <li>lorem</li>
  <li>lorem</li>
  <li>lorem</li>
  <li>lorem</li>
  <li class="filler"></li>
  <li class="filler"></li>
  <li class="filler"></li>
</ul>

【讨论】：

感谢您的解决方案，但元素的数量可以根据 API 进行更改。
没问题。三个填充物需要是静态的。正常的 flex child 可以动态生成。你可以测试一下。做不同的行，你会看到，空间总是很好。
我已经编辑了我的 sn-p 并添加了一些 JavaScript 来向您展示该解决方案适用于动态元素。

【解决方案3】：

我只是在这里猜测你的 html 和 css 结构，但我假设你有这样的东西：

.wrapper {
  width: 1000px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.item {
  background: gray;
  width: 200px;
  height: 100px;
  border: 1px solid black;
}

<div class="wrapper">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

您可以通过使用简单的边距并根据您的需要将justify-content 属性设置为center 或flex-start 来保持每个元素周围的间距相同。

.wrapper {
  width: 1000px;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
}

.item {
  background: gray;
  width: 200px;
  height: 100px;
  border: 1px solid black;
  margin: 0 20px;
}

<div class="wrapper">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

【讨论】：