Бесплатный курс по HTML/CSS. Зарегистрируйтесь для отслеживания прогресса →

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

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

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

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

1
2
3

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

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

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

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

flex-start

1
2
3

flex-end

1
2
3

center

1
2
3

space-between

1
2
3

space-around

1
2
3

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

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

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

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

flex-start

1
2
3

flex-end

1
2
3

center

1
2
3

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

flex-direction: column и justify-content: space-between

1
2
3

Задание

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

<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 доработайте блок и, используя выравнивание, разместите блоки по центру

Упражнение не проходит проверку — что делать? 😶

Если вы зашли в тупик, то самое время задать вопрос в «Обсуждениях». Как правильно задать вопрос:

  • Обязательно приложите вывод тестов, без него практически невозможно понять что не так, даже если вы покажете свой код. Программисты плохо исполняют код в голове, но по полученной ошибке почти всегда понятно, куда смотреть.
В моей среде код работает, а здесь нет 🤨

Тесты устроены таким образом, что они проверяют решение разными способами и на разных данных. Часто решение работает с одними входными данными, но не работает с другими. Чтобы разобраться с этим моментом, изучите вкладку «Тесты» и внимательно посмотрите на вывод ошибок, в котором есть подсказки.

Мой код отличается от решения учителя 🤔

Это нормально 🙆, в программировании одну задачу можно выполнить множеством способов. Если ваш код прошел проверку, то он соответствует условиям задачи.

В редких случаях бывает, что решение подогнано под тесты, но это видно сразу.

Прочитал урок — ничего не понятно 🙄

Создавать обучающие материалы, понятные для всех без исключения, довольно сложно. Мы очень стараемся, но всегда есть что улучшать. Если вы встретили материал, который вам непонятен, опишите проблему в «Обсуждениях». Идеально, если вы сформулируете непонятные моменты в виде вопросов. Обычно нам нужно несколько дней для внесения правок.

Кстати, вы тоже можете участвовать в улучшении курсов: внизу есть ссылка на исходный код уроков, который можно править прямо из браузера.


Нашли ошибку? Есть что добавить? Пулреквесты приветствуются https://github.com/hexlet-basics
Если вы столкнулись с трудностями и не знаете, что делать, задайте вопрос в нашем большом и дружном сообществе