HTML/CSS: Выравнивание элементов внутри контейнера

• Выравнивание по главной оси
• Выравнивание по побочной оси

Одна из главных фишек флекс — возможность выравнивание контента по любой из осей. Будь то главная или побочная ось, вы всегда можете воспользоваться несколькими свойствами, чтобы автоматически разместить элементы на странице.

В этом уроке мы изучим свойства justify-content и align-items, которые позволяют расположить элементы по главной и побочной оси соответственно.

Для разбора работы свойств используем следующий пример:

Серым цветом обозначен Flex-контейнер. Именно к нему и будут применяться все свойства из этого урока

Выравнивание по главной оси

Для выравнивания по главной оси используется свойство justify-content. Оно указывается у контейнера (блок со свойством display: flex) и может иметь множество значений. Разберём самые распространённые значения:

• flex-start — выравнивание по началу оси. Хоть это и не значение по умолчанию, но оно выглядит именно так, как на примере выше
• flex-end — выравнивание по концу оси
• center — выравнивание контента по центру контейнера
• space-between — первый и последний элемент прижимаются к началу и концу оси, а остальные элементы распределяются по остальному пространству
• space-around — принцип такой же, как и у значения space-between, но первый и последний элемент так же получают отступы, которые равны половине отступов у остальных элементов

Выравнивание по побочной оси

Помимо выравнивания элементов по главной оси, флекс позволяет одновременно выравнять элементы по побочной оси. Именно для понимания этого эффекта примеры в этом уроке имеют большую высоту контейнера чем необходимо.

Чтобы выровнять элементы по побочной оси используется свойство align-items. В нём также много значений, но рассмотрим работу самых популярных:

• flex-start — выравнивание по началу побочной оси
• flex-end — выравнивание по концу побочной оси
• center — выравнивание по центру

Как видите, значений тут сильно меньше, чем при выравнивании по главной оси. Помните про две оси — если воспользоваться свойством flex-direction: column, то визуально выравнивание изменится. В этом случае для выравнивания по вертикали будет использоваться свойство justify-content:

Задание

Заказчик захотел, чтобы в блоке «Вопрос-ответ» появилась стрелка, которая визуально свяжет вопрос и ответ. Доработайте функционал блока

<style>
.qa {
  font: 18px/1.5 sans-serif;
}

.question {
  width: 400px;
  padding: 20px;

  color: #fff;
  background: #8ea7e9;
}

.answer {
  width: 400px;
  padding: 20px;
}

.arrow {
  margin: 0 10px;
}
</style>

<div class="qa">
  <div class="question">Какие языки программирования наиболее востребованы в 2023?</div>
  <div class="arrow">→</div>
  <div class="answer">Самыми популярными языками для изучения в 2023 году остаются Python и JavaScript</div>
</div>

Стрелка визуально находится по середине относительно блоков с вопросом и ответом. Используя Flex доработайте блок и, используя выравнивание, разместите блоки по центру