flex-basis: исходный размер до распределения места
flex-basis задаёт базовый размер flex-элемента по главной оси перед распределением свободного пространства.
Назначение
flex-basis задаёт базовый размер flex-элемента по главной оси перед распределением свободного пространства.
Как это работает
При направлении row это относится к ширине, при column — к высоте. Значения auto и 0 ведут к разным исходным расчётам; результат затем корректируют grow, shrink и ограничения размера.
Пример
<style>
.cards{display:flex;flex-wrap:wrap;gap:12px}.card{flex:1 1 12rem;padding:16px;background:#eaf4ee}
</style>
<div class="cards"><div class="card">Первая карточка</div><div class="card">Вторая карточка</div><div class="card">Третья карточка</div></div>Что должно получиться
Карточки стремятся начинать расчёт с 12rem, могут расти и переноситься. Реальная ширина зависит от доступного места и числа карточек в конкретной строке.
Граница применения и частая ошибка
Не путайте базу с гарантированным итоговым размером. Элемент с flex-basis:12rem может вырасти или сжаться, если это разрешают остальные свойства.
Самостоятельная проверка
Уменьшите контейнер так, чтобы две карточки не помещались в строку. Затем замените базу на 0 и сравните поведение переноса и распределения места.
HTML и CSS можно изменить в песочнице ниже. Она изолирована: JavaScript, внешние ресурсы и отправка форм отключены. Для проверки сетевых запросов, отправки данных или функций браузера используйте отдельную локальную страницу.