Используя flexbox, как сделать карты не увеличиваться, чтобы заполнить пробел в последней строке?

Как я могу, используя flexbox, сделать все карты одинакового размера, а во второй строке, если карт недостаточно, чтобы заполнить строку, затем выровняйте карты влево и оставьте пустым справа? На данный момент карты растут, чтобы заполнить пространство во втором ряду.

Вот мой CSS:

.container {
    display: flex;
    flex-flow: row wrap;
    align-content: flex-start;
}

.card {
    flex: 1 1 0;
    padding: 0.5rem;
}

Ответ 1

Здесь, как получить это с помощью JavaScript:

$('.container').append($('<div />', {class:'sizer'}));
let topSizer = $('.sizer')[0].getBoundingClientRect().top,
    perCent = 100;
while ($('.sizer')[0].getBoundingClientRect().top === topSizer && topSizer > 0) {
  $('.sizer').css({flexBasis:(perCent--)+'%'});
}

.sizer {
  flex-basis: 100%;
}

Что он делает, добавляет .sizer как последний элемент, который имеет flex-basis:100% изначально. Чем он уменьшает его flex-basis до тех пор, пока он не будет помещен в предыдущую строку, эффективно нажав остальные элементы на начало строк.

Первая часть script ниже просто добавляет карты со случайными словами в .container (игнорируйте ее).

let words = [
  'interesting',
  'tongue',
  'excellent',
  'start',
  'sticky',
  'lame',
  'lopsided',
  'ill-informed',
  'terrible',
  'reduce',
  'near',
  'order'
]
for (var i = 0; i < 20; i++) {
  let text = '';
  for (var j = 0; j < 3; j++) {
    text += words[parseInt(Math.random() * words.length)] + ' '
  }
  $('.container').append($('<div />', {
    class: 'card',
    text: text
  }))
}
// the above script generates cards with random words. juice is below:

$('.container').append($('<div />', {class:'sizer'}));
let topSizer = $('.sizer')[0].getBoundingClientRect().top,
    perCent = 100;
while ($('.sizer')[0].getBoundingClientRect().top === topSizer && topSizer > 0) {
  $('.sizer').css({flexBasis:(perCent--)+'%'});
}

.container {
  display: flex;
  flex-flow: row wrap;
  align-content: flex-start;
}

.card {
  flex: 1 1 0;
  padding: 0.5rem;
  margin: 0 -1px -1px 0;
  border: 1px solid #ccc;
}
.sizer {
  flex-basis: 100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container"></div>