Как использовать flexbox для верстки элементов на странице?

Flexbox (или Flexible Box Layout) — это CSS модуль, предназначенный для создания гибких макетов элементов в контейнере, позволяя легко распределять пространство и выравнивать элементы, даже когда их размеры неизвестны или динамически изменяются.

Основная концепция Flexbox — это flex-контейнер и его flex-элементы.

Свойства для Flex-контейнера (display: flex;):

• flex-direction: Определяет направление размещения flex-элементов в контейнере (главная ось).

  • row (по умолчанию): по горизонтали, слева направо.
  • row-reverse: по горизонтали, справа налево.
  • column: по вертикали, сверху вниз.
  • column-reverse: по вертикали, снизу вверх.

• flex-wrap: Определяет, переносятся ли flex-элементы на новую(ие) строку(и), если они не помещаются в одну строку контейнера.

  • nowrap (по умолчанию): все элементы в одну строку.
  • wrap: переносятся на новую строку.
  • wrap-reverse: переносятся на новую строку, но в обратном порядке.

• justify-content: Выравнивает flex-элементы вдоль главной оси.

  • flex-start (по умолчанию): выравнивание по началу главной оси.
  • flex-end: выравнивание по концу главной оси.
  • center: выравнивание по центру главной оси.
  • space-between: равномерное распределение с отступами между элементами.
  • space-around: равномерное распределение с отступами вокруг элементов.
  • space-evenly: равномерное распределение с одинаковыми отступами между и вокруг элементов.

• align-items: Выравнивает flex-элементы вдоль поперечной оси (перпендикулярно главной).

  • stretch (по умолчанию, если flex-элементы не имеют заданной высоты/ширины): растягивает элементы по высоте/ширине поперечной оси.
  • flex-start: выравнивание по началу поперечной оси.
  • flex-end: выравнивание по концу поперечной оси.
  • center: выравнивание по центру поперечной оси.
  • baseline: выравнивание по базовой линии текста.

• align-content: Выравнивает строки flex-элементов вдоль поперечной оси, когда есть перенос строк (flex-wrap: wrap). Ведет себя analogous justify-content только для поперечной оси.

  • stretch (по умолчанию): растягивает строки.
  • flex-start: выравнивание строк по началу поперечной оси.
  • flex-end: выравнивание строк по концу поперечной оси.
  • center: выравнивани