---
status: processing
type: concept
tags:
- css
- flexbox
- grid
- adaptive-design
- responsive-web
created: 2026-05-30
updated: 2026-06-05
source:
- '[[14-css-adaptive.pdf]]'
- '[[17-css-grid.pdf]]'
- '[[18-css-flex.pdf]]'
aliases:
- 'CSS: Адаптивность, Flexbox и Grid'
---
# Адаптивная верстка

Адаптивность (AWD) и отзывчивость (RWD) позволяют сайту корректно отображаться на любых устройствах.

## Медиазапросы (@media)
Синтаксис:
```css
@media screen and (max-width: 768px) {
    /* Стили для планшетов и телефонов */
}
```
- **Mobile First:** Сначала стили для мобильных, затем `min-width`.
- **Desktop First:** Сначала для десктопов, затем `max-width`.

---

# Flexbox (Flexible Box Layout)
Одномерная модель раскладки (по одной оси).

- **Контейнер:** `display: flex;` / `inline-flex;`.
- **Направление:** `flex-direction: row | column | row-reverse`.
- **Перенос:** `flex-wrap: wrap | nowrap`.
- **Выравнивание по главной оси:** `justify-content: flex-start | center | space-between | space-around`.
- **Выравнивание по поперечной оси:** `align-items: center | stretch`.
- **Свойства элементов:** 
    - `flex-grow` (коэффициент роста), 
    - `flex-shrink` (сжатие), 
    - `flex-basis` (базовый размер),
    - `order` (порядок отображения).

Главная ось зависит от `flex-direction`:

- `row` — главная ось горизонтальная;
- `column` — главная ось вертикальная.

`justify-content` выравнивает по главной оси. `align-items` выравнивает по поперечной оси. Значение `align-items` по умолчанию — `stretch`.

---

# Grid Layout
Двумерная модель раскладки (строки + столбцы).

- **Контейнер:** `display: grid;`.
- **Определение сетки:** 
    - `grid-template-columns: repeat(3, 1fr);` (3 колонки равной ширины).
    - `grid-template-rows: auto 1fr;`.
- **Единица fr:** Доля свободного пространства.
- **Функция `repeat`:** сокращает повторяющиеся колонки или строки.
- **Функция `minmax`:** задаёт минимальный и максимальный размер трека.
- **Отступы:** `gap: 10px;`.
- **Размещение элементов:**
    - `grid-column: 1 / 3;` (от 1-й до 3-й линии).
    - `grid-row: 2 / span 2;` (со 2-й линии на 2 ячейки).
- **Именованные области:**
```css
.container {
    grid-template-areas: 
        "header header"
        "sidebar content"
        "footer footer";
}
header { grid-area: header; }
```

---

# Сравнение Flex и Grid
- **Flexbox:** Лучше для одномерных структур (меню, тулбары) и распределения пространства между элементами.
- **Grid:** Лучше для сложных макетов всей страницы, перекрытия элементов и точного контроля над строками и столбцами одновременно.

## Простыми словами для экзамена

Flexbox — раскладка в одном направлении: строка или колонка. Grid — раскладка сразу по двум направлениям: строки и столбцы.

Flex-контейнер создаётся так:

```css
.menu {
  display: flex;
}
```

Строчный flex-контейнер:

```css
.menu {
  display: inline-flex;
}
```

Grid-контейнер:

```css
.layout {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto minmax(200px, 1fr);
}
```

Термины Grid:

- grid lines — линии сетки;
- grid tracks — строки или столбцы между линиями;
- grid cells — ячейки;
- grid areas — именованные области.

`fr` делит свободное место. `1fr 2fr` означает: второй столбец получит в два раза больше свободного места, чем первый.