⚡ Кратко
📚 Подробно
⚡ Кратко
Шпаргалка «рецепт → CSS». Навбар = justify-content: space-between; сетка =
flex-wrap: wrap + gap; центр = justify-content: center +
align-items: center; медиа-объект = flex: 1 у текста; sticky-footer =
колонка + min-height: 100vh + flex: 1 у main.
Паттерны → готовый CSS
Паттерн Ключевой CSS Где применять
Навбар display: flex; justify-content: space-between; align-items: centerШапка сайта: лого слева, меню справа Сетка карточек display: flex; flex-wrap: wrap; gap: 1rem + flex: 1 1 <basis> у карточекКаталоги, ленты, галереи Центрирование display: flex; justify-content: center; align-items: centerМодалки, заглушки, hero Медиа-объект display: flex; gap; аватар flex: 0 0 <w>; текст flex: 1Комментарии, уведомления Sticky-footer flex-direction: column; min-height: 100vh; main — flex: 1Логин, 404, профиль
Свойства, которые встретятся
Свойство На ком Назначение
display: flexконтейнер Включает flex-раскладку для прямых детей flex-directionконтейнер row (по умолч.) или column — направление главной осиjustify-contentконтейнер Распределение по главной оси: space-between, center… align-itemsконтейнер Выравнивание по поперечной оси: center, flex-start… flex-wrapконтейнер wrap — перенос элементов на новую строкуgapконтейнер Промежутки между элементами (без margin-хаков) flexэлемент Сокращение flex-grow flex-shrink flex-basis, напр. 1 1 200px
Важно: свойства контейнера (justify-content,
align-items, gap, flex-wrap) и свойства элемента (flex)
не взаимозаменяемы. Если правило не работает — сначала проверьте, на каком элементе оно написано.