Свойство flex-basis
Задает начальный размер элемента в контейнере flexbox. Если используется flex-direction: row; то flex-basis отвечает за ширину элемента, если используется flex-direction: column; то flex-basis отвечает за высоту элемента. Данное свойство имеет приоритет, если используется вместе с width и height свойствами.
flex-basis: 20%;- поддерживается начиная с
- частичная поддержка до
- не поддерживается
Значения
flex-basis: auto;
Размер элемента будет изменяться в зависимости от содержимого
<style>
.example-1 {
display: flex;
outline: 2px dashed #ccc;
}
.example-1-item {
flex-basis: auto;
padding: 5px;
margin: 2px;
background: #8ee391;
}
</style>
<div class="example-1">
<div class="example-1-item">текст текст текст</div>
<div class="example-1-item">текст текст</div>
<div class="example-1-item">текст</div>
</div>flex-basis: 25%;
Размер элемента в указанных единицах. Возможные единицы: %, px, em, rem, vh, vw. Если установлен flex-direction: row; и элемент не помещается в строку, а свойство flex-wrap не установлено в значение wrap, то размер ячейки будет изменен в соответствии с оставшимся пространством
<style>
.example-2 {
display: flex;
outline: 2px dashed #ccc;
}
.example-2-item {
flex-basis: 25%;
padding: 5px;
margin: 2px;
background: #8ee391;
}
</style>
<div class="example-2">
<div class="example-2-item">текст</div>
<div class="example-2-item">текст</div>
<div class="example-2-item">текст</div>
<div class="example-2-item">текст</div>
</div>flex-basis: 0;
Начальный размер элемента равен 0. В связке со свойством flex-grow: 1; получим элементы одинакового размера.
<style>
.example-3 {
display: flex;
outline: 2px dashed #ccc;
}
.example-3-item {
flex-basis: 0;
flex-grow: 1;
padding: 5px;
margin: 2px;
background: #8ee391;
}
</style>
<div class="example-3">
<div class="example-3-item">текст текст</div>
<div class="example-3-item">текст</div>
<div class="example-3-item">текст</div>
</div>