3.1 Flexbox
Создание гибких макетов с использованием Flexbox и Grid — это ключевая техника в разработке современных отзывчивых веб-сайтов. Эти технологии позволяют легко управлять расположением элементов на странице, обеспечивая их адаптацию к различным размерам экранов и устройствам.
Flexbox (Flexible Box Layout Module) предназначен для одномерного размещения элементов (либо по строке, либо по колонке). Flexbox упрощает создание гибких и отзывчивых макетов.
Основные концепции Flexbox:
- Flex-контейнер: элемент, к которому применяется свойство
display: flex - Flex-элементы: дочерние элементы flex-контейнера, которые располагаются внутри него
Свойства Flexbox
Flex-контейнер:
display: flex: определяет элемент как flex-контейнерflex-direction: устанавливает направление расположения flex-элементов (row,column,row-reverse,column-reverse)justify-content: управляет выравниванием flex-элементов по главной оси (flex-start,flex-end,center,space-between,space-around)align-items: управляет выравниванием flex-элементов по поперечной оси (stretch,flex-start,flex-end,center,baseline)
Flex-элементы:
flex-grow: определяет способность элемента увеличиваться при наличии свободного пространстваflex-shrink: определяет способность элемента уменьшаться при недостатке пространстваflex-basis: задает начальный размер элемента перед распределением свободного пространстваalign-self: переопределяет выравнивание элемента по поперечной оси, заданное вalign-items
Пример использования Flexbox
Создадим макет с тремя колонками, который будет адаптироваться к различным размерам экрана:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Пример Flexbox</title>
<style>
.flex-container {
display: flex;
justify-content: space-between;
align-items: stretch;
flex-wrap: wrap;
}
.flex-item {
flex: 1 1 200px;
margin: 10px;
padding: 20px;
background-color: #f4f4f4;
text-align: center;
}
</style>
</head>
<body>
<div class="flex-container">
<div class="flex-item">Колонка 1</div>
<div class="flex-item">Колонка 2</div>
<div class="flex-item">Колонка 3</div>
</div>
</body>
</html>
Объяснение кода:
-
.flex-container: определяет контейнер как flex-контейнер, выравнивает элементы с равными промежутками между ними и позволяет элементам переноситься на следующую строку при недостатке пространства -
.flex-item: flex-элементы, которые занимают равное пространство, имеют минимальную ширину 200px и равномерно распределены внутри контейнера
3.2 CSS Grid
CSS Grid Layout — это двухмерная система компоновки, которая позволяет создавать сложные макеты с использованием строк и колонок.
Основные концепции CSS Grid:
- Grid-контейнер: элемент, к которому применяется свойство
display: grid - Grid-элементы: дочерние элементы grid-контейнера, которые располагаются в сетке
Свойства CSS Grid
Grid-контейнер:
display: grid: определяет элемент как grid-контейнерgrid-template-columns: устанавливает количество и размеры колонок в сеткеgrid-template-rows: устанавливает количество и размеры строк в сеткеgap: управляет промежутками между строками и колонкамиjustify-items: управляет горизонтальным выравниванием grid-элементовalign-items: управляет вертикальным выравниванием grid-элементов
grid-column: определяет, на сколько колонок элемент будет простиратьсяgrid-row: определяет, на сколько строк элемент будет простиратьсяjustify-self: переопределяет горизонтальное выравнивание элементаalign-self: переопределяет вертикальное выравнивание элемента
Grid-элементы:
Пример использования CSS Grid
Создадим макет с тремя колонками и двумя строками, который будет адаптироваться к различным размерам экрана.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Пример CSS Grid</title>
<style>
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(2, 1fr);
gap: 10px;
}
.grid-item {
padding: 20px;
background-color: #e4e4e4;
text-align: center;
}
</style>
</head>
<body>
<div class="grid-container">
<div class="grid-item">Элемент 1</div>
<div class="grid-item">Элемент 2</div>
<div class="grid-item">Элемент 3</div>
<div class="grid-item">Элемент 4</div>
<div class="grid-item">Элемент 5</div>
<div class="grid-item">Элемент 6</div>
</div>
</body>
</html>
Объяснение кода:
.grid-container: определяет контейнер как grid-контейнер с тремя колонками и двумя строками, каждый элемент занимает равное пространство.grid-item: grid-элементы с равномерными отступами и фоном
ПЕРЕЙДИТЕ В ПОЛНУЮ ВЕРСИЮ