Свойство 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>Читайте также
Свойство transform-origin
Устанавливает координаты точки, относительно которой будет происходить трансформация элемента....
Идентификатор
Идентификатор определяет уникальное имя элемента, которое используется для изменения его стиля и обращения к нему через скрипты.
При описании и...
Свойство border-bottom-width
Устанавливает толщину границы внизу элемента....
Свойство all
Универсальное свойство, сбрасывает все значения свойств в исходные значения, исключением является свойства direction и unicode-bidi....