Dmitry
147 lines
7.1 KiB
Markdown
147 lines
7.1 KiB
Markdown
---
|
|
status: processing
|
|
type: concept
|
|
tags:
|
|
- css
|
|
- flexbox
|
|
- grid
|
|
- adaptive-design
|
|
- responsive-web
|
|
created: 2026-05-30
|
|
updated: 2026-06-07
|
|
source:
|
|
- '[[14-css-adaptive.pdf]]'
|
|
- '[[17-css-grid.pdf]]'
|
|
- '[[18-css-flex.pdf]]'
|
|
aliases:
|
|
- 'CSS: Адаптивность, Flexbox и Grid'
|
|
---
|
|
|
|
# Адаптивная верстка
|
|
|
|
## Виды верстки
|
|
1) **Фиксированная** - макет разрабатывается с фиксированными параметрами (например, с точным указанием размеров в пикселях). Такой подход *устарел* и применяется редко.
|
|
2) **Мобильная** - сайт создается на выделенном поддомене и адаптируется только под мобильные устройства. Соответственно, ресурс станет *удобен для чтения лишь пользователям смартфонов и планшетов.*
|
|
3) **Резиновая** - ширина блока задается в процентах от ширины экрана пользователя. Благодаря этому "резиновые" сайты одинаково хорошо читаются с любых устройств. Тем не менее, адаптивная верстка, равно как и отзывчивая, постепенно вытесняет резиновую.
|
|
4) **Отзывчивая** - напоминает адаптивную верстку, но в то же время принципиально отличается от нее. Отличие заключается в действиях на брейк-поинтах. Если в адаптивном варианте браузер резко меняет сверстанный макет, то в отзывчивом происходит плавное изменение верстки между точками слома с максимальным сохранением стабильного вида страницы. Фактически данный подход сочетает в себе признаки адаптивности и "резиновости".
|
|
5) **Адаптивная** - Основные параметры сайта подстраиваются под характеристики пользовательского устройства. Ресурс в результате должен удобно читаться практически с любого гаджета или компьютера.
|
|
|
|
Адаптивность (AWD) и отзывчивость (RWD) позволяют сайту корректно отображаться на любых устройствах.
|
|
|
|
## Медиазапросы (@media)
|
|
Синтаксис:
|
|
```css
|
|
@media screen and (max-width: 768px) {
|
|
/* Стили для планшетов и телефонов */
|
|
}
|
|
```
|
|
- **Mobile First:** Сначала стили для мобильных, затем `min-width`.
|
|
- **Desktop First:** Сначала для десктопов, затем `max-width`.
|
|
|
|
```css
|
|
/* Различается и ориентация макета */
|
|
@media (orientation: landscape) {
|
|
/* При горизонтальной ориентации фоновым цветом сайта будет белый */
|
|
body {
|
|
background: #FFF;
|
|
}
|
|
}
|
|
/* Ещё существует portrait - вертикальная */
|
|
|
|
```
|
|
|
|
---
|
|
|
|
# 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` означает: второй столбец получит в два раза больше свободного места, чем первый.
|