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

Свойство `flex-basis` задает размер конкретного flex-блока до применения к нему остальных flex свойств. В общем, свойство задает размер элемента вдоль главной оси. Это значит, что если главная ось горизонтальна - это свойство будет задавать ширину элементов, а если вертикальна - то высоту.

Применяется к конкретному flex блоку.

Данное свойство является составной частью свойства-сокращения `flex`.

## Синтаксис

`селектор { flex-basis: любые CSS единицы (и проценты) | auto; }`

Значение по умолчанию: `auto`.

## Пример

Пусть главная ось расположена у нас горизонтальна, а `flex-basis` имеет значение `50px`. В этом случае ширина элементов будет `50px`:

`<div class="parent"> <div class="child">1</div> <div class="child">2</div> <div class="child">3</div> </div>` `.parent { display: flex; flex-direction: row; /* ось горизонтальна */ width: 300px; height: 300px; border: 1px solid red; } .child { flex-basis: 50px; /* размер элемента */ border: 1px solid green; }`

:

## Пример

Давайте теперь перевернем ось, не меняя значение свойства `flex-basis`. В этом случае уже высота элементов будет `50px`:

`<div class="parent"> <div class="child">1</div> <div class="child">2</div> <div class="child">3</div> </div>` `.parent { display: flex; flex-direction: column; /* ось вертикальна */ width: 300px; height: 300px; border: 1px solid red; } .child { flex-basis: 50px; border: 1px solid green; }`

:

## Смотрите также

- свойство `flex-direction`,
  которое задает направление осей flex блоков
- свойство `justify-content`,
  которое задает выравнивание по главной оси
- свойство `align-items`,
  которое задает выравнивание по поперечной оси
- свойство `flex-wrap`,
  которое многострочность flex блоков
- свойство `flex-flow`,
  сокращение для flex-direction и flex-wrap
- свойство `order`,
  которое задает порядок flex блоков
- свойство `align-self`,
  которое задает выравнивание одного блока
- свойство `flex-grow`,
  которое задает жадность flex блоков
- свойство `flex-shrink`,
  которое задает сжимаемость flex блоков
- свойство `flex`,
  сокращение для flex-grow, flex-shrink и flex-basis

← →
↑
en ru