Справочник HTML & CSS

flex-basis

Начальный размер flex-элемента вдоль главной оси до раздачи свободного места.

Синтаксис

flex-basis: value;

Значения

Параметр	Тип	Описание
length	length	Размер: `200px`, `10rem`.
%	percentage	Процент от контейнера.
auto	keyword	Берётся `width` (или `height` в столбике), иначе размер содержимого (по умолчанию).

Примеры

Разные начальные размеры:

<style>
  .row { display: flex; gap: 6px; }
  .row div { padding: 6px; background: peachpuff; }
</style>
 
<div class="row">
  <div style="flex-basis: 100px;">100px</div>
  <div style="flex-basis: 50%;">50%</div>
</div>

Примечания

В ряду flex-basis работает как width, в столбике — как height. Обычно его задают через сокращение flex.

См. также

flex — Сокращённая запись того, как flex-элемент растёт, сжимается и с какого размера начинает.
flex-grow — Какую часть свободного места забирает flex-элемент.
width — Ширина элемента.

Вопросы и ответы по теме

Как перестроить колонки в столбик на телефоне

В учебнике

Flex-элементы — Как управлять отдельными элементами во flexbox — flex-grow, flex-shrink, flex-basis, сокращение flex, align-self, order и margin auto.

Спасибо, что читаете!