Auto | arch-x1: 2026-06-05 13:24:09

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

@@ -1,5 +1,5 @@
 ---
-status: seed
+status: processing
 type: concept
 tags:
 - css
@@ -8,7 +8,7 @@ tags:
 - adaptive-design
 - responsive-web
 created: 2026-05-30
-updated: 2026-05-31
+updated: 2026-06-05
 source:
 - '[[14-css-adaptive.pdf]]'
 - '[[17-css-grid.pdf]]'
@@ -46,6 +46,13 @@ aliases:
     - `flex-basis` (базовый размер),
     - `order` (порядок отображения).
 
+Главная ось зависит от `flex-direction`:
+
+- `row` — главная ось горизонтальная;
+- `column` — главная ось вертикальная.
+
+`justify-content` выравнивает по главной оси. `align-items` выравнивает по поперечной оси. Значение `align-items` по умолчанию — `stretch`.
+
 ---
 
 # Grid Layout
@@ -56,6 +63,8 @@ aliases:
     - `grid-template-columns: repeat(3, 1fr);` (3 колонки равной ширины).
     - `grid-template-rows: auto 1fr;`.
 - **Единица fr:** Доля свободного пространства.
+- **Функция `repeat`:** сокращает повторяющиеся колонки или строки.
+- **Функция `minmax`:** задаёт минимальный и максимальный размер трека.
 - **Отступы:** `gap: 10px;`.
 - **Размещение элементов:**
     - `grid-column: 1 / 3;` (от 1-й до 3-й линии).
@@ -76,3 +85,42 @@ 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` означает: второй столбец получит в два раза больше свободного места, чем первый.