---
status: seed
type: concept
tags:
- css
- flexbox
- grid
- adaptive-design
- responsive-web
created: 2026-05-30
updated: 2026-05-31
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` (порядок отображения).

---

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

- **Контейнер:** `display: grid;`.
- **Определение сетки:** 
    - `grid-template-columns: repeat(3, 1fr);` (3 колонки равной ширины).
    - `grid-template-rows: auto 1fr;`.
- **Единица fr:** Доля свободного пространства.
- **Отступы:** `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:** Лучше для сложных макетов всей страницы, перекрытия элементов и точного контроля над строками и столбцами одновременно.