SecondBrain/90 Library/Programming/Web/Адаптивность, Flexbox и Grid.md

status, type, tags, created, updated, source, aliases

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

Адаптивная верстка

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

Медиазапросы (@media)

Синтаксис:

@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 ячейки).
• Именованные области:

.container {
    grid-template-areas: 
        "header header"
        "sidebar content"
        "footer footer";
}
header { grid-area: header; }

---

Сравнение Flex и Grid

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

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

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

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

.menu {
  display: flex;
}

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

.menu {
  display: inline-flex;
}

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

.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 означает: второй столбец получит в два раза больше свободного места, чем первый.