Dmitry
79 lines
2.9 KiB
Markdown
79 lines
2.9 KiB
Markdown
---
|
|
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:** Лучше для сложных макетов всей страницы, перекрытия элементов и точного контроля над строками и столбцами одновременно.
|