Задание 1–2. Ряд блоков и центрирование
1
2
3
.row {
display: flex; /* строка */
gap: 1rem; /* промежутки */
justify-content: center; /* собрать по центру */
}Задание 3. Шапка-навигация
.navbar {
display: flex;
justify-content: space-between; /* логотип ↔ ссылки */
align-items: center; /* по центру по вертикали */
}Задание 4. Колонка
1
2
3
.col { display: flex; flex-direction: column; }
/* теперь главная ось — вертикальная:
justify-content управляет по вертикали,
align-items — по горизонтали */Разбор логики
Ключ решения — назначить display: flex родителю и не переносить
свойства контейнера на дочерние элементы. Дальше:
- направление ряда —
flex-direction(row/column); - выравнивание вдоль главной оси —
justify-content; - выравнивание поперёк —
align-items; - расстояния между элементами —
gap(не margin).