Flexbox (Flexible Box Layout) — это технология CSS, которая позволяет удобно и гибко располагать элементы на веб-страницах. Flexbox упрощает выравнивание, распределение пространства и адаптацию макета под разные размеры экрана. Это один из самых популярных инструментов для создания динамичных и отзывчивых интерфейсов.

Преимущества Flexbox:

📏 Выбор направления: Можно выстраивать элементы по горизонтали (row) или по вертикали (column).

🔄 Автоматическая адаптация: Элементы подстраиваются под содержимое и размеры контейнера.

🎯 Контроль отступов и выравнивания: Легко задавать расстояние между элементами и их выравнивание (justify-content, align-items и др.).

📱 Адаптивный дизайн: Отлично подходит для разных экранов и устройств.

🧱 Упрощение сложных макетов: То, что раньше требовало много кода, с Flexbox делается быстро и просто.

Основные понятия:

• Flex-контейнер: Родительский элемент с display: flex.
• Flex-элементы: Вложенные элементы внутри контейнера.

.container {

display: flex;

justify-content: space-between;

align-items: center;

}

Простой пример:

<div class="container">

<div>Один</div>

<div>Два</div>

<div>Три</div>

</div>

.container {

display: flex;

justify-content: space-around;

}

Где используется Flexbox:

• Меню навигации
• Сеточные карточки
• Мобильные версии сайтов
• Панели управления и интерфейсы приложений