Урок 23. Решения: Главная и поперечная оси

📁 Раздел: Flexbox ⏱️ Время изучения: ~55 мин 🎯 Сложность: Средняя
#main #flex-direction #justify-content #align-items #flex-wrap

⚡ Кратко

Все свойства — на контейнере. justify-content — вдоль главной оси, align-items — поперёк. При column оси меняются местами.

Задание 1–2. Главная ось и распределение

Прижать к правому краю — flex-end; равные промежутки между блоками — space-between.

justify-content: flex-end

1
2
3

justify-content: space-between

1
2
3
/* lesson-23/solution.css */
.bar { display: flex; justify-content: flex-end; }      /* задание 1 */
.bar { display: flex; justify-content: space-between; }  /* задание 2 */

Задание 3–4. Поперечная ось и центр

Высота контейнера + align-items: center центрируют по вертикали. Добавив justify-content: center, получаем центр по обеим осям.

align-items: center (высота 120px)

1
2
3

центр по обеим осям

в центре
/* lesson-23/solution.css */
.bar {                 /* задание 3 */
  display: flex;
  align-items: center;
  min-height: 120px;
}
.hero {                /* задание 4 */
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 120px;
}

Задание 5. Смена осей при column

При flex-direction: column главная ось становится вертикальной. Значит: justify-content теперь двигает блоки по вертикали, а align-items — по горизонтали. Свойства те же — оси поменялись.

1
2
3
/* lesson-23/solution.css */
.bar {
  display: flex;
  flex-direction: column;
  align-items: center; /* центр по ГОРИЗОНТАЛИ (cross при column) */
}

Задание 6. Перенос

1
2
3
4
5
6
/* lesson-23/solution.css */
.gallery { display: flex; flex-wrap: wrap; }
Главный вывод: сначала определите направление главной оси (flex-direction), и только потом выбирайте, чем выравнивать — вдоль (justify-content) или поперёк (align-items).

Навигация