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

Свойство flex-basis задаёт начальный основной размер flex-элемента — размер, который он получает до того, как свободное пространство распределяется с помощью flex-grow или уменьшается с помощью flex-shrink. Если свойство не указано, его начальное значение равно auto.

Свойство flex-basis является одним из свойств CSS3 и действует только на дочерние элементы flex-контейнера (элемент с display: flex или display: inline-flex). Если родительский элемент не является flex-контейнером, flex-basis не имеет никакого эффекта.

Зачем использовать flex-basis?

В Flexbox-разметке размер элемента вычисляется в два этапа:

Браузер считывает значение flex-basis элемента, чтобы установить начальный размер вдоль главной оси.
Затем каждый элемент увеличивается или уменьшается от этого начального размера, чтобы заполнить (или уместиться в) контейнер в соответствии со значениями flex-grow и flex-shrink.

Используйте flex-basis, когда хотите задать идеальный размер элемента, но при этом сохранить его гибкость. Например, flex-basis: 200px означает «стремиться к 200px, а затем увеличиваться или уменьшаться от этого значения», тогда как width: 200px — это жёсткий размер, который Flexbox менее склонен переопределять.

flex-basis и width

Когда flex-basis задан в единицах длины или процентах, он имеет приоритет над width (или height, если flex-direction равен column) при определении начального основного размера элемента. Ключевое отличие: flex-basis всегда применяется вдоль главной оси и следует за flex-direction. При flex-direction: row он управляет шириной, а при flex-direction: column — высотой. Обычный width всегда управляет горизонтальным размером вне зависимости от направления.

Когда используется flex-basis: auto, элемент возвращается к своим значениям width/height (или к размеру содержимого, если они не заданы).

Примечание: Сокращённое свойство flex задаёт flex-basis вместе с flex-grow и flex-shrink. Если вы используете flex, оно имеет приоритет над отдельным объявлением flex-basis — поэтому указывайте flex-basis после flex или используйте сокращённую форму напрямую, чтобы избежать неожиданного поведения.

Начальное значение	auto
Применяется к	Flex-элементам, включая псевдоэлементы в потоке.
Наследуется	Нет.
Анимируется	Да. Элементы поддерживают анимацию.
Версия	CSS3
DOM-синтаксис	object.style.flexBasis = "100px";

Синтаксис

Синтаксис свойства CSS flex-basis

flex-basis: length | percentage | auto | initial | inherit | min-content | max-content | fit-content | content;

Базовый пример

Пример свойства CSS flex-basis

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .box {
        width: 300px;
        height: 80px;
        border: 1px solid #666;
        display: flex;
      }
      .box div {
        flex-grow: 0;
        flex-shrink: 0;
        flex-basis: 40px;
      }
      .box div:nth-of-type(2) {
        flex-basis: 140px;
      }
    </style>
  </head>
  <body>
    <h2>Flex-basis property example</h2>
    <div class="box">
      <div style="background-color: #eeeeee;">40px</div>
      <div style="background-color: #1c87c9;">140px</div>
      <div style="background-color: #8ebf42;">40px</div>
      <div style="background-color: #cccccc;">40px</div>
      <div style="background-color: #666666;">40px</div>
    </div>
  </body>
</html>

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

Результат

Пример со всеми значениями

Пример свойства flex-basis со всеми значениями:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .box {
        height: 70px;
        display: flex;
      }
      .box div {
        flex-grow: 0;
        flex-shrink: 0;
        flex-basis: 60px;
        padding: 15px;
      }
      .box div:first-child {
        background-color: #40c3da;
      }
      .box div:nth-of-type(2) {
        flex-basis: 40%;
        background-color: lightgreen;
      }
      .box div:nth-of-type(3) {
        flex-basis: auto;
        background-color: yellow;
      }
      .box div:nth-of-type(4) {
        flex-basis: initial;
        background-color: orange;
      }
      .box div:nth-of-type(5) {
        flex-basis: inherit;
        background-color: pink;
      }
    </style>
  </head>
  <body>
    <h2>Flex-basis property example</h2>
    <div class="box">
      <div>
        number 60px
      </div>
      <div>
        percentage 40%
      </div>
      <div>
        auto
      </div>
      <div>
        initial
      </div>
      <div>
        inherit
      </div>
    </div>
  </body>
</html>

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

Пример со значениями в пикселях

Пример свойства flex-basis со значениями в пикселях:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .box {
        width: 460px;
        height: 70px;
        display: flex;
      }
      .box div {
        flex-grow: 0;
        flex-shrink: 0;
        flex-basis: 70px;
        padding: 15px;
      }
      .box div:first-child {
        background-color: #40c3da;
      }
      .box div:nth-of-type(2) {
        flex-basis: 100px;
        background-color: lightgreen;
      }
      .box div:nth-of-type(3) {
        background-color: #1c87c9;
      }
      .box div:nth-of-type(4) {
        flex-basis: 150px;
        background-color: orange;
      }
      .box div:nth-of-type(5) {
        background-color: #8ebf42;
      }
    </style>
  </head>
  <body>
    <h2>Flex-basis property example</h2>
    <div class="box">
      <div>
        70px
      </div>
      <div>
        100px
      </div>
      <div>
        70px
      </div>
      <div>
        150px
      </div>
      <div>
        70px
      </div>
    </div>
  </body>
</html>

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

Значения

Значение	Описание	Попробовать
length \| percentage	Абсолютная длина (`px`, `em`, `rem`) или процент от основного размера flex-контейнера. Отрицательные значения недопустимы.	Попробовать »
auto	Значение по умолчанию. Элемент использует собственные `width`/`height` (или размер содержимого, если они не заданы) в качестве основы.	Попробовать »
initial	Сбрасывает свойство до значения по умолчанию (`auto`).	Попробовать »
inherit	Наследует значение от родительского элемента.
min-content	Задаёт размер элемента по его наименьшей возможной ширине содержимого (самое длинное неразрывное слово или элемент).	Попробовать »
max-content	Задаёт размер элемента по его максимальной ширине содержимого без переноса строк.	Попробовать »
fit-content	Ограничивает размер между `min-content` и `max-content`, аналогично функции `fit-content()`.	Попробовать »
content	Задаёт размер элемента на основе его содержимого, игнорируя заданные `width`/`height`. Ограниченная поддержка браузерами.	Попробовать »

Распространённые ошибки

flex-basis не работает вне flex-контейнера. Родительский элемент должен иметь display: flex или display: inline-flex.
flex-basis равный 0 (или 0%) вместе с flex-grow: 1 распределяет пространство пропорционально только по коэффициенту роста, игнорируя размер содержимого — именно так работают многие раскладки с «равными колонками».
Проценты вычисляются относительно основного размера контейнера, а не viewport. Если у контейнера нет чёткого размера по главной оси, flex-basis в процентах может вести себя как auto.
Сокращённое свойство flex перекрывает flex-basis. Запись flex: 1 сбрасывает basis до 0%, что может переопределить более раннее объявление flex-basis.

Связанные свойства

flex — сокращённое свойство для flex-grow, flex-shrink и flex-basis.
flex-grow — насколько элемент увеличивается сверх своего basis.
flex-shrink — насколько элемент уменьшается ниже своего basis.
Полное руководство по Flexbox — полная модель Flexbox в одном месте.

Практика

Что делает свойство 'flex-basis' в CSS?

Оно определяет размер flex-элемента.Оно изменяет цвет flex-элемента.Оно задаёт начальный основной размер flex-элемента.Оно полностью управляет порядком flex-элементов.Оно удаляет flex-элемент.