Таргетирование элементов Flex в последней или конкретной строке

Моя проблема в том, что я хочу flexbox с переменной шириной диапазона, и все работает хорошо, но не в последнем ряду. Мне нужно одинаковое измерение для всех детей, даже если строка не заполнена детьми (последний ряд).

#products-list {
    position:relative;
    display: flex;
    flex-flow: row wrap;
    width:100%;
}

#products-list .product {
    min-width:150px;
    max-width:250px;
    margin:10px 10px 20px 10px;
    flex:1;
}

Я создал динамическую ситуацию в jsFiddle

Мои flex-div могут уменьшаться до 150px и увеличиваться до 250px, но все они должны быть одинакового размера (и, очевидно, я хочу решение CSS, с JS я знаю способ).

Ответы

Ответ 1

К сожалению, в текущей итерации flexbox (Уровень 1) нет чистого способа решить проблему выравнивания последней строки. Это обычная проблема.

Было бы полезно иметь свойство flex по строкам:

  • last-row
  • last-column
  • only-child-in-a-row
  • alone-in-a-column

Эта проблема, по-видимому, является высокоприоритетной для Flexbox Level 2:

Несмотря на то, что в flexbox этого поведения трудно достичь, в CSS Grid Layout легко и просто:

В случае, если сетка не является вариантом, вот список похожих вопросов, содержащих различные флексографские хаки:

Ответ 2

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

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

Ответ 3

Я использовал этот обходной путь, даже если он не очень элегантен и не использует возможности 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 может быть по-прежнему существенным для отзывчивого дизайна.