Свойство 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>Первый
Второй
Третий
Читайте также
Свойство justify-content
Определяет, как браузер распределяет пространство вокруг флекс - элементов вдоль главной оси конт...
Свойство border-top-width
Устанавливает толщину верхней границы элемента.
Стиль включенных элементов интерфейса
Псевдокласс :checked применяется к элементам интерфейса, таким как переключатели (checkbox), флаж...
Свойство border-top-right-radius
Устанавливает радиус скругления правого нижнего угла рамки.<br>Если рамка не задана, то скр...
Стиль целевого элемента
Для перехода к выбранному фрагменту документа, в адресе пишется символ # и указывается имя иденти...