# Размер флекс элемента вдоль главной оси

Свойства `width` и `height` задают ширину и высоту флекс элемента независимо от направления осей. То есть, если ось горизонтальна, то `width` будет задавать ширину, но если ось вертикальна, то `width` по-прежнему будет задавать ширину. Иногда такое поведение не удобно.

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

Пусть сейчас главная ось горизонтальна, а `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; }`

:

Сделайте `5` флекс-блоков. Задайте им ширину вдоль главной оси в `100px`. Посмотрите на поведение блоков вдоль разных осей.

Если ось горизонтальна и блоку задано свойство `flex-basis` и одновременно свойство `width`, то `flex-basis` будет иметь приоритет. Проверьте это.

Если ось вертикальна и блоку задано свойство `flex-basis` и одновременно свойство `height`, то `flex-basis` будет иметь приоритет. Проверьте это.

←→
↑