Используйте flex-wrap: wrap и flex: 1 1 100px: базовая ширина 100px, свободное место распределяется между элементами, строки переносятся. Минимальную ширину нужно определить отдельно.
Организация элементов в контейнере с адаптивной шириной
Используйте flex-wrap: wrap и flex: 1 1 100px: базовая ширина 100px, свободное место распределяется между элементами, строки переносятся. Минимальную ширину нужно определить отдельно.
Короткий ответ
Что ответить на собеседовании
Подробный разбор
Ответ с пояснениями
Условие
Требуется разместить элементы внутри контейнера так, чтобы каждый из них имел базовую ширину 100 px. При наличии свободного места элементы должны расширяться, заполняя всю ширину контейнера. Если места недостаточно, ширина элементов должна уменьшаться, чтобы они все уместились. Когда элементов становится слишком много для одной строки, они должны автоматически переходить на следующую строку.
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
</div>
Ответ
Используйте flex-wrap: wrap и flex: 1 1 100px: базовая ширина 100px, свободное место распределяется между элементами, строки переносятся. Минимальную ширину нужно определить отдельно.
.container { display: flex; flex-wrap: wrap; gap: 12px; }
.item { flex: 1 1 100px; min-width: 0; overflow-wrap: anywhere; }
Flexbox сначала распределяет элементы по строкам с учётом базового размера, затем распределяет место внутри каждой строки. Поэтому wrap не означает, что все элементы сначала сожмутся до произвольного минимума и лишь потом перенесутся. Если нужен именно такой приоритет, условию не хватает порога минимальной ширины; задайте его явно. При контейнере уже 100px одиночный элемент сможет сжаться благодаря min-width: 0.