Проблема расположения элементов

При создании сайтов часто возникает задача: - расположить элементы в строку - разместить элементы по центру - распределить элементы по всей ширине страницы

Ранее это делали с помощью таблиц или сложных CSS-методов. Flexbox значительно упрощает эту задачу.

---

Что такое Flexbox

Flexbox (Flexible Box Layout) — это технология CSS для удобного размещения элементов на странице.

Flexbox позволяет: - выстраивать элементы в строку - выравнивать элементы - распределять свободное пространство - создавать адаптивные интерфейсы

---

Flex-контейнер

Чтобы использовать Flexbox, нужно задать контейнеру свойство:

display: flex;

Пример:

.container {
display: flex;
}

Все элементы внутри контейнера становятся flex-элементами.

Пример

HTML:

<div class="container">
<div>Блок 1</div>
<div>Блок 2</div>
<div>Блок 3</div>
</div>

CSS:

.container {
display: flex;
}

Результат: блоки расположатся в одну строку.

---

Направление элементов

Свойство:

flex-direction

Возможные значения:

Значение	Описание
row	элементы в строку
column	элементы в столбец

Пример:

.container {
display: flex;
flex-direction: column;
}

---

Распределение элементов

Свойство:

justify-content

Используется для выравнивания по горизонтали.

Основные значения:

Значение	Описание
flex-start	в начале
center	по центру
flex-end	в конце
space-between	равные промежутки
space-around	пространство вокруг элементов

Пример:

.container {
display: flex;
justify-content: center;
}

---

Выравнивание по вертикали

Свойство:

align-items

Основные значения:

Значение	Описание
flex-start	сверху
center	по центру
flex-end	снизу

Пример:

.container {
display: flex;
align-items: center;
}

---

Пример Flexbox

HTML:

<div class="menu">
<div>Главная</div>
<div>Новости</div>
<div>Контакты</div>
</div>

CSS:

.menu {
display: flex;
justify-content: space-between;
padding: 20px;
border: 1px solid black;
}

Элементы меню будут равномерно распределены.

---

Flexbox для карточек

Flexbox часто используется для карточек.

HTML:

<div class="cards">

<div class="card">Товар 1</div>
<div class="card">Товар 2</div>
<div class="card">Товар 3</div>

</div>

CSS:

.cards {
display: flex;
gap: 20px;
}

.card {
border: 1px solid gray;
padding: 20px;
}

---

Рекомендации

Flexbox рекомендуется использовать для: - меню сайта; - карточек товаров; - размещения блоков; - центрирования элементов.