Свойство 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>Читайте также
Свойство padding-block-start
Определяет начальный внутренний отступ элемента по блочной оси. В зависимости от значения свойства writing-mode, свойство padding-block-end может соот...
Свойство animation-iteration-count
Указывает, сколько раз будет воспроизводится анимация....
Свойство table-layout
Определяет, как браузер должен вычислять ширину ячеек таблицы, основываясь на её содержимом....
Свойство margin-left
Устанавливает величину отступа от левой границы текущего элемента до внутренней границы его родительского элемента....