CSS Flexbox (Гибкая блочная модель)
Название Flexbox — это сокращённая форма модуля CSS Flexible Box Layout.
Это модель компоновки, которая располагает элементы внутри контейнера по горизонтали или по вертикали гибким и адаптивным способом.
Вы получаете гибкие и адаптивные макеты без особых усилий, и при этом не нужны ни float, ни позиционирование.
Flexbox против Grid: Разница в измерениях. Flexbox работает с одним за раз (строки ИЛИ столбцы), а CSS Grid работает с двумя (строки И столбцы).
Пример
Пять flex-элементов расположены в ряд внутри одного flex-контейнера.
Результат: полная HTML-страница
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Five Flex Items</title>
<style>
.container {
display: flex;
background-color: DodgerBlue;
}
.container div {
background-color: #f1f1f1;
margin: 10px;
padding: 20px;
font-size: 30px;
}
</style>
</head>
<body>
<div class="container">
<div>Item 1</div>
<div>Item 2</div>
<div>Item 3</div>
<div>Item 4</div>
<div>Item 5</div>
</div>
</body>
</html>
Компоненты CSS Flexbox
Любой flexbox состоит из двух частей:
- Flex-контейнер — родительский элемент, у которого свойство
displayимеет значениеflexилиinline-flex. - Один или несколько Flex-элементов — любой прямой дочерний элемент контейнера автоматически становится таким элементом.
Flex-контейнер с тремя Flex-элементами
В примере ниже синяя область — это flex-контейнер, и в нём находятся три flex-элемента.
В следующих главах контейнеры и элементы рассматриваются подробнее.
Пример
Три flex-элемента внутри одного flex-контейнера.
Результат: полная HTML-страница
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Three Flex Items</title>
<style>
.container {
display: flex;
background-color: DodgerBlue;
}
.container div {
background-color: #f1f1f1;
margin: 10px;
padding: 20px;
font-size: 30px;
}
</style>
</head>
<body>
<div class="container">
<div>Item 1</div>
<div>Item 2</div>
<div>Item 3</div>
</div>
</body>
</html>