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

Я пытаюсь создать некоторый CSS для списка прямоугольников с обертыванием, который является отзывчивым. Прямоугольники могут содержать переменное количество текста. Прямоугольники должны иметь минимальную ширину 300 пикселей, но могут увеличиваться, если имеется больше свободного места. Он должен работать независимо от количества прямоугольников.

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

(я понимаю, что большинство телефонов и настольных компьютеров шире, чем в пикселях, но с этими числами легче работать, когда речь заходит о фрагментах кода SO.)

Я пробую три метода, и никто из них не делает то, что я хочу:

1. Flexbox не работает:

Flexbox может показаться идеальным для этой работы. Проблема с реализацией Flexbox заключается в том, что я не могу найти способ убедиться, что последний прямоугольник остается того же размера, что и остальные, а также позволяет прямоугольникам расти на очень широких экранах. Вот образ лучшего Flexbox, который я мог бы придумать, у которого есть проблема с последней строкой:

Здесь код реализации Flexbox:

.container {
  display: flex;
  flex-wrap: wrap;
}
.rect {
  flex: 1 0 300px;
  height: 150px;
}

<div class="container">
  <div class="rect" style="background-color: #2F80ED"></div>
  <div class="rect" style="background-color: #2D9CDB"></div>
  <div class="rect" style="background-color: #56CCF2"></div>
  <div class="rect" style="background-color: #A6E2F5"></div>
  <div class="rect" style="background-color: #D6EBF2"></div>
</div>

Ответ 1

Вы можете использовать flex с дополнительным элементом через псевдо с без высоты:

.container {
  display: flex;
  flex-wrap: wrap;
  background:gray;/*see me */
}
.container:after {
  content:'';
  flex: 1 0 300px;
  margin-bottom:auto;
  }
.rect {
  flex: 1 0 300px;
  height: 150px;
}

<div class="container">
  <div class="rect" style="background-color: #2F80ED"></div>
  <div class="rect" style="background-color: #2D9CDB"></div>
  <div class="rect" style="background-color: #56CCF2"></div>
  <div class="rect" style="background-color: #A6E2F5"></div>
  <div class="rect" style="background-color: #D6EBF2"></div>
</div>

Ответ 2

Я знаю, что вы сказали, что искали ответ, который не касался медиа-запросов, но я считаю, что это лучший способ справиться с этой ситуацией.

Если вы установили position: relative; на ваш .container, все его дети будут составлять их ширину в процентах от ширины .container. В то время как технически вы все равно будете основывать свои условия на ширине экрана, вы все равно можете установить ширину контейнера любого размера, а .rect будет масштабироваться до этой ширины, это будет просто зависеть от того, какой из ваших медиа-запросов был активен для какой процент ваш .rect будет масштабироваться.

Вы также можете установить max-width: для своего .container в любом из этих медиа-запросов, если вы не хотите, чтобы он превысил определенный размер.

Вот ссылка на ручку, которая имеет макет, похожий на ваши намеченные изображения выше. http://codepen.io/bryanrunner/pen/BppzbE

.container {
  position: relative;
  display: flex;
  flex-flow: row wrap;
  max-width: 1200px;
}
.rect {
  height: 150px;
}

@media (max-width: 1920px) {
  .rect {
    width: 20%;
  }
}

@media (max-width: 1000px) {
  .rect {
    width: 50%;
  }
}

@media (max-width: 600px) {
  .rect {
    width: 100%;
  }
}