Свойство flex-basis

Описание

Определяет основу флекса, которая является начальным размером элемента. Похоже на свойства width и height, к которым добавляется содержимое элемента.

Синтаксис

flex-basis: auto | размер;
Значение Описание
auto Указывает автоматический размер, основанный на содержимом элемента.
размер Задаёт размер элемента в px, mm, pt или в процентах вдоль главной оси. Размер вычисляется относительно родителя. Отрицательное значение использовать запрещено.

Пример

<!DOCTYPE html>
<html lang='ru'>
<head>
<meta charset='UTF-8'>
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
<title>Document</title>
</head>
<body>
<style>
.flex-container {
display: flex;
height: 300px;
color: #fff;
font-size: 1em;
flex-flow: column wrap;
}
.flex-item {
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
}
.one {
background: lightcoral;
margin-right: 10px;
flex-basis: 100%;
}
.two {
background: lightblue;
margin-bottom: 10px;
flex: 1 1 0;
}
.three {
background: lightgreen;
flex: 1 1 0;
}
</style>
<div class='flex-container'>
<div class='flex-item one'>Первый</div>
<div class='flex-item two'>Второй</div>
<div class='flex-item three'>Третий</div>
</div>
</body>
</html>
Первый
Второй
Третий

Читайте также