Обернуть элементы для последней строки в гибком макете с пробелом между выравниванием

Question

Можно ли как-нибудь обернуть элементы в строках с пробелом между выравниванием, где в последнем ряду нет большого пропуска?

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

Фактическое поведение:

Мне нужен такой же "пробел" в последнем ряду по сравнению с другими строками.

Answer 1

Вы можете использовать элементы «наполнитель».Вам нужно 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>

Answer 2

Я просто догадываюсь о вашей структуре 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>

Answer 3

Самый быстрый способ получить то, что вы ищете, это добавить пустой элемент после последнего видимого элемента:

<!-- 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 */