Flexbox - пробел между выпуском с последней строкой, не выравнивающейся непосредственно над указанными выше элементами [duplicate]

В качестве быстрого и грязного решения можно использовать:

.my-flex-child:last-child/*.product:last-child*/ {
  flex-grow: 100;/*Or any number big enough*/
}

Я использовал этот обходной путь, даже если он не очень изящный, и он не использует силу Flexbox.

Он может быть выполнен на следующих условиях:

• Все элементы имеют одинаковую ширину
• Элементы имеют фиксированную ширину
• Вы используете SCSS / SASS (этого можно избежать)

Если это так, вы можете использовать следующий фрагмент:

 $itemWidth: 400px;
 $itemMargin: 10px;

html, body {
  margin: 0;
  padding: 0;
}

.flex-container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  margin: 0 auto;
  border: solid 1px blue;
}

@for $i from 1 through 10 {
  @media only screen and (min-width: $i * $itemWidth + 2 * $i * $itemMargin) {
    .flex-container {
      width: $i * $itemWidth + 2 * $i * $itemMargin;
    }
  }
}

.item {
  flex: 0 0 $itemWidth;
  height: 100px;
  margin: $itemMargin;
  background: red;
}

<div class="flex-container">
  <div class="item"></div>
  <div class="item" style="flex: 500 0 200px"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

Здесь Я создал пример в codepen , который также реализует маржу.

Второе и третье условия можно избежать, соответственно, используя переменные css (если вы решили обеспечить его поддержку) и компилируете приведенный выше фрагмент scss.

Ну, это правда, мы могли бы сделать это и перед flexbox, но display: flex может быть по-прежнему существенным для отзывчивого дизайна.