Свойство 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>Первый
Второй
Третий
Читайте также
Селекторы атрибутов со значениями в начале
Устанавливает стиль для элемента в том случае, если значение атрибута начинается с указанного тек...
Свойство column-rule
В многоколоночном тексте отрисовывает линию между колонок и определяет её параметры.
Свойство pointer-events
Позволяет управлять тем, как элементы будут реагировать на события мыши или прикосновения к сенсо...
Свойство background-repeat
Определяет, как будет повторяться фоновое изображение, установленное с помощью свойства backgroun...
Свойство order
Определяет порядок вывода флексов внутри флекс-контейнера. Элементы располагаются согласно значен...