Свойство 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-basis
,
которое задает размер конкретного flex блока -
свойство
flex-grow
,
которое задает жадность flex блоков -
свойство
flex-shrink
,
которое задает сжимаемость flex блоков -
свойство
flex
,
сокращение для flex-grow, flex-shrink и flex-basis