CSS свойство `flex-basis`

Определение и применение

Свойство flex-basis задаёт исходный размер Flexbox-элемента по главной оси до распределения свободного места. При auto берётся размер по главной оси (width или height); если он тоже auto, размер определяется содержимым.

Процентный базовый размер вычисляется относительно внутреннего размера контейнера по главной оси. Если этот размер не определён, результат соответствует content. 0 и 0% поэтому не всегда равнозначны.

В генераторе Flexbox можно настроить контейнер и размеры его элементов и получить готовый CSS.

Попробуйте значения flex-basis

Меняется исходный размер оранжевого элемента вдоль главной оси до распределения свободного места.

Значение свойстваflex-basis: auto;flex-basis: 40px;flex-basis: 120px;flex-basis: 50%;

flex-basis: auto

HTML и CSS примера

HTML

<div class="stage">
  <div class="item">1</div>
  <div class="item demo-target">2</div>
  <div class="item">3</div>
</div>

CSS

* {
  box-sizing: border-box;
}
.stage {
  width: 100%;
  max-width: 300px;
  height: 210px;
  padding: 10px;
  border: 2px dashed #607589;
  background: #edf2f5;
  color: #172c3d;
  font: 16px/1.4 system-ui;
}
.item {
  padding: 10px;
  border: 2px solid #245a85;
  background: #b9d7eb;
}
.stage {
  display: flex;
  gap: 8px;
  align-items: flex-start;
}
.item {
  min-width: 0;
  width: 55px;
}
.demo-target {
  background: #ffe4bd;
  flex-basis: auto;
}

CSS

* {
  box-sizing: border-box;
}
.stage {
  width: 100%;
  max-width: 300px;
  height: 210px;
  padding: 10px;
  border: 2px dashed #607589;
  background: #edf2f5;
  color: #172c3d;
  font: 16px/1.4 system-ui;
}
.item {
  padding: 10px;
  border: 2px solid #245a85;
  background: #b9d7eb;
}
.stage {
  display: flex;
  gap: 8px;
  align-items: flex-start;
}
.item {
  min-width: 0;
  width: 55px;
}
.demo-target {
  background: #ffe4bd;
  flex-basis: 40px;
}

CSS

* {
  box-sizing: border-box;
}
.stage {
  width: 100%;
  max-width: 300px;
  height: 210px;
  padding: 10px;
  border: 2px dashed #607589;
  background: #edf2f5;
  color: #172c3d;
  font: 16px/1.4 system-ui;
}
.item {
  padding: 10px;
  border: 2px solid #245a85;
  background: #b9d7eb;
}
.stage {
  display: flex;
  gap: 8px;
  align-items: flex-start;
}
.item {
  min-width: 0;
  width: 55px;
}
.demo-target {
  background: #ffe4bd;
  flex-basis: 120px;
}

CSS

* {
  box-sizing: border-box;
}
.stage {
  width: 100%;
  max-width: 300px;
  height: 210px;
  padding: 10px;
  border: 2px dashed #607589;
  background: #edf2f5;
  color: #172c3d;
  font: 16px/1.4 system-ui;
}
.item {
  padding: 10px;
  border: 2px solid #245a85;
  background: #b9d7eb;
}
.stage {
  display: flex;
  gap: 8px;
  align-items: flex-start;
}
.item {
  min-width: 0;
  width: 55px;
}
.demo-target {
  background: #ffe4bd;
  flex-basis: 50%;
}

Поддержка браузерами

Спецификация: CSS flexbox

Поддерживается во всех основных браузерах с 2015 года.

Отдельные значения (1) поддерживаются не везде — смотрите таблицу.

ВсеКомпьютерыМобильные

Совместимостьcss.properties.flex-basis
Возможность	Компьютеры					Мобильные
Возможность	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox for Android	Opera Android	Safari on iOS	Samsung Browser	WebView Android	WebView on iOS
`flex-basis`	✓29 Версия 29 выпущена в 2013 г. Версия 22 выпущена в 2012 г. — Префикс -webkit-	✓12 Версия 12 выпущена в 2015 г. Версия 12 выпущена в 2015 г. — Префикс -webkit-	✓22 Версия 22 выпущена в 2013 г. Примечание MDN (англ.) Since Firefox 28, multi-line flexbox is supported. Версия 49 выпущена в 2016 г. — Префикс -webkit-	✓12.1 Версия 12.1 выпущена в 2012 г. Версия 15 выпущена в 2013 г. — Префикс -webkit-	✓9 Версия 9 выпущена в 2015 г. Версия 7 выпущена в 2013 г. — Префикс -webkit-	✓29 Версия 29 выпущена в 2013 г. Версия 25 выпущена в 2013 г. — Префикс -webkit-	✓22 Версия 22 выпущена в 2013 г. Примечание MDN (англ.) Since Firefox for Android 28, multi-line flexbox is supported. Версия 49 выпущена в 2016 г. — Префикс -webkit-	✓12.1 Версия 12.1 выпущена в 2012 г. Версия 14 выпущена в 2013 г. — Префикс -webkit-	✓9 Версия 9 выпущена в 2015 г. Версия 7 выпущена в 2013 г. — Префикс -webkit-	✓2.0 Версия 2.0 выпущена в 2014 г. Версия 1.5 выпущена в 2013 г. — Префикс -webkit-	✓4.4 Версия 4.4 выпущена в 2013 г. Версия 4.4 выпущена в 2013 г. — Префикс -webkit-	✓9 Версия 9 выпущена в 2015 г. Версия 7 выпущена в 2013 г. — Префикс -webkit-
`auto`	✓22	✓12	✓22	✓12.1	✓9 Версия 9 выпущена в 2015 г. Версия 7 выпущена в 2013 г. — Префикс -webkit-	✓25	✓22	✓12.1	✓9 Версия 9 выпущена в 2015 г. Версия 7 выпущена в 2013 г. — Префикс -webkit-	✓1.5	✓4.4	✓9 Версия 9 выпущена в 2015 г. Версия 7 выпущена в 2013 г. — Префикс -webkit-
`content`	✓94	✓94 Версия 94 выпущена в 2021 г. Версия 12 выпущена в 2015 г. — Удалено в 79	✓61	✓80	✓15.4	✓94	✓61	✓66	✓15.4	✓17.0	✓94	✓15.4
`fit-content`	✓94	✓94	✓94 Версия 94 выпущена в 2021 г. Версия 22 выпущена в 2013 г. — Префикс -moz-	✓80	✓16	✓94	✓94 Версия 94 выпущена в 2021 г. Версия 22 выпущена в 2013 г. — Префикс -moz-	✓66	✓16	✓17.0	✓94	✓16
`max-content`	✓94	✓94	✓66 Версия 66 выпущена в 2019 г. Версия 22 выпущена в 2013 г. — Префикс -moz-	✓80	✓16	✓94	✓66 Версия 66 выпущена в 2019 г. Версия 22 выпущена в 2013 г. — Префикс -moz-	✓66	✓16	✓17.0	✓94	✓16
`min-content`	✓94	✓94	✓66 Версия 66 выпущена в 2019 г. Версия 22 выпущена в 2013 г. — Префикс -moz-	✓80	✓16	✓94	✓66 Версия 66 выпущена в 2019 г. Версия 22 выпущена в 2013 г. — Префикс -moz-	✓66	✓16	✓17.0	✓94	✓16
`stretch`	✓138	✓138	×	✓122	✓27	✓138	×	✓91	✓27	✓30.0	✓138	✓27
Ещё 5 значений · поддерживаются везде более 3 летСвернуть

поддерживаетсяс ограниченияминет поддержкинет данных≤31 — не позднее версии 31

CSS синтаксис:

CSS

flex-basis: content | <'width'>;

/* Глобальные значения */
flex-basis: initial | inherit | unset | revert | revert-layer;

| — выбор варианта.

JavaScript синтаксис:

JavaScript

element.style.flexBasis = "100px";

Начальное значение свойства

auto.

Значения свойства

Значения flex-basis
Значение	Описание
`auto`	Берёт заданный размер элемента по главной оси: `width` при `row` или `height` при `column`. Если этот размер тоже `auto`, используется содержимое. Начальное значение.
`width`	Размер по главной оси: неотрицательная длина, процент или внутренний размер, например `min-content`. Процент зависит от определённости размера контейнера. Значения `em` и `rem` — относительные, а не абсолютные единицы.
`content`	Исходный размер определяется содержимым независимо от явно заданного размера по главной оси.
`initial`	Устанавливает начальное значение свойства.
`inherit`	Наследует вычисленное значение свойства у родительского элемента.
`unset`	Для ненаследуемого свойства `flex-basis` устанавливает его начальное значение.
`revert`	Отменяет заданное в коде значение свойства для этого элемента: применяются пользовательские или стандартные стили браузера. Если они не задают значение, свойство наследуется или получает начальное значение по обычным правилам. Не возвращает значение из предыдущей строки CSS.
`revert-layer`	Сбрасывает значение свойства для текущего слоя каскада `@layer`. Применяется значение из другого слоя по правилам каскада; если подходящего значения нет, возможен откат к стилям пользователя или браузера.

Спецификация

CSS Flexible Box Layout — спецификация flex-basis.

Наследуется

Нет.

Анимируемое

Да, по вычисленному значению: совместимые числовые значения интерполируются плавно. Переход между несовместимыми типами или ключевыми словами может быть дискретным.

Примеры, попробуйте сами

Базовый размер через flex-basis

Измените базовый размер второго элемента с 150px на 80px. Итоговая ширина также зависит от сжатия и свободного места.

base.css

CSS

* {
    box-sizing: border-box;
}
body {
    margin: 16px;
    font:
        16px/1.5 system-ui,
        sans-serif;
    color: #172c3d;
}
section {
    margin-bottom: 24px;
    min-width: 0;
}
h3 {
    margin: 0 0 12px;
    font-size: 16px;
}
.item {
    padding: 8px;
    min-width: 0;
    background: #c5dbea;
    border: 1px solid #35658a;
    overflow-wrap: anywhere;
}

.container {
    color: white;
}

.container div:nth-of-type(1) {
    background: orange;
}

.container div:nth-of-type(2) {
    background: brown;
}

.container div:nth-of-type(3) {
    background: tan;
}

index.html