Я пытаюсь создать некоторый 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>