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

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

В этом случае элементы выйдут за пределы контейнера и продолжат располагаться на главной оси, так как, по умолчанию, контейнер не переносит элементы.

В примере ниже ширина контейнера обозначена синим цветом, а между элементами есть пространство, чтобы понять, когда элементы вышли за пределы контейнера:

Чтобы определить, как поведут себя элементы при нехватке пространства используется свойство flex-wrap, которое принимает одно из значений:

• nowrap — значение по умолчанию. Элементы не переносятся
• wrap — самое распространенное значение. Элементы переносятся при нехватке пространства внутри контейнера
• wrap-reverse — перенос элементов с переворотом порядка элементов по главной оси. Этот порядок удобен при создании блогов, так как более старые записи окажутся внизу

Вот как располагаются элементы при использовании этих значений:

Задание

В этом уроке мы снова вернёмся к стилизации блока «Вопрос-ответ». В этот раз у него жестко ограничена ширина для элементов, поэтому их стоит переносить, если недостаточно места.

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

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

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

.answer {
  width: 400px;
  padding: 20px;
}
</style>

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

Доработайте функционал вёрстки. Проверить её можно уменьшив окно вашего браузера