🧱 Суть
Flex и Grid – это два основных CSS-инструмента для построения расположения элементов.
Главное отличие:
- Flex → одна ось (линия)
- Grid → две оси (сетка)
Ассоциация:
Flex = линейка
Grid = таблица
📦 Проблема
1. Использование неправильного инструмента
Flex хорошо подходит для:
- навигации
- кнопок в ряд
- выравнивания элементов
Grid лучше подходит для:
- страниц
- карточных сеток
- сложных расположений
2. Путаница между похожими свойствами
Например:
justify-content
align-itemsЕсть и в Flex, и в Grid, но работают в разных контекстах.
✅ Решение
Выбирать инструмент по структуре задачи:
- нужна линия элементов → Flex
- нужна сетка → Grid
💻 Код
Сравнение
| Flex | Grid |
|---|---|
| Одна ось | Две оси |
| Линейное расположение | Строки + колонки |
| Управляет элементами | Управляет областями |
flex-direction | grid-template-rows / columns |
flex-wrap | grid-auto-flow |
flex: 1 | grid-column / grid-row |
Основные различия
Направление
Flex:
flex-direction: row;Определяет направление линии.
Grid:
grid-template-columns: 200px 1fr;Создаёт структуру колонок.
Выравнивание
Flex:
justify-content
align-itemsРаботает относительно осей контейнера.
Grid:
justify-items
align-itemsРаботает внутри ячеек.
Распределение места
Flex:
flex: 1;“Займи свободное пространство”
Grid:
grid-column: span 2;“Займи несколько ячеек”
🎯 Вывод
- Flex = расположение элементов по одной линии
- Grid = построение двумерной структуры
- Flex проще для компонентов
- Grid удобнее для больших layout-систем
- свойства похожи, но смысл разный