Введение в Flexbox

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

Зачем нужен Flexbox?

До появления Flexbox разработчики использовали различные «хаки» для создания макетов:

• Float — изначально предназначен для обтекания текстом изображений
• Inline-block — создаёт нежелательные пробелы между элементами
• Таблицы — семантически неправильно для макетов
• Абсолютное позиционирование — элементы выпадают из потока

Flexbox решает эти проблемы элегантно. Посмотрите разницу:

Основные концепции Flexbox

Для понимания Flexbox важно знать ключевые термины:

1. Flex-контейнер и Flex-элементы

2. Главная и поперечная оси

Flexbox работает с двумя осями:

• Главная ось (main axis) — направление, в котором располагаются элементы
• Поперечная ось (cross axis) — перпендикулярна главной

Ваш первый Flexbox-макет

Создадим простую карточку с flexbox. Поэкспериментируйте с кодом:

Что дальше?

В следующем уроке мы подробно разберём все свойства flex-контейнера: flex-direction, justify-content, align-items и другие.