vault backup: 2026-05-30 19:03:22

2026-05-30 19:03:22 +03:00
parent a54f2b19c3
commit 7a4f2ced46
16 changed files with 1986 additions and 19 deletions
@@ -0,0 +1,70 @@
+---
+status: seed
+type: concept
+tags: [css, flexbox, grid, adaptive-design, responsive-web]
+created: 2026-05-30
+updated: 2026-05-30
+title: CSS: Адаптивность, Flexbox и Grid
+source: ["[[14-css-adaptive.pdf]]", "[[17-css-grid.pdf]]", "[[18-css-flex.pdf]]"]
+---
+
+# Адаптивная верстка
+
+Адаптивность (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:** Лучше для сложных макетов всей страницы, перекрытия элементов и точного контроля над строками и столбцами одновременно.