description.ru.yml

---

name: Flex-контейнер
theory: |
  Расположение элементов на странице — одна из важных областей работы верстальщика или фронтенд-разработчика. Во всех прошлых уроках мы добавляли небольшие элементы, но их расположение определялось только тем, как они были добавлены в HTML. Чаще всего это просто расположение сверху вниз.

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

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

  Одним из способов решения такой задачи является использование модуля Flex из CSS. Для этого достаточно указать свойство `display` со значением `flex` у общего блока, внутри которого находятся блоки с практикой и теорией.

  ```html
  <style>
  .container {
    display: flex;
  }
  </style>

  <div class="container">
    <div class="theory">Тут теория</div>
    <div class="practice">Тут редактор с практикой</div>
  </div>
  ```

  Для наглядности добавим немного стилей, чтобы увидеть расположение блоков

  <div class="hexlet-basics-example my-3">
    <div class="container d-flex fw-bold text-white" style="height: 200px;">
      <div class="bg-black bg-opacity-50 p-3">Тут теория</div>
      <div class="bg-opacity-50 bg-primary p-3">Тут редактор с практикой</div>
    </div>
  </div>

  В текущей верстке блок с классом `container` называется _Flex-контейнер_, а элементы с классами `theory` и `practice` будут называться _Flex-элементами_. Важно, что _flex-элементы_ это только те элементы, которые лежат непосредственно внутри контейнера.

  Например,

  ```html
  <style>
  .container {
    display: flex;
  }
  </style>

  <div class="container">
    <div class="theory">
      <div class="theory-text">Тут теория</div>
    </div>
    <div class="practice">
      <div class="vscode"></div>
    </div>
  </div>
  ```

  В этой разметке flex-элементами будут блоки с классами `theory` и `practice`, но вложенные в них блоки с классами `theory-text` и `vscode` уже не являются flex-элементами. На них не будут действовать правила, которые мы изучим в следующих уроках.

instructions: |
  Создайте флекс контейнер с классом `qa`, внутри которого будет два элемента:

  1. Блок с текстом: `Какие языки программирования наиболее востребованы в 2023?`. Блок имеет ширину `40%`. Класс для блока: `question`
  2. Блок с текстом: `Самыми популярными языками для изучения в 2023 году остаются Python и JavaScript`. Ширина блока `60%`. Класс для блока: `answer`

  Попробуйте самостоятельно стилизовать элементы, чтобы сделать из этого блока настоящий блок с вопросами и ответами. Тесты будут проверять только правильное использование контейнера

tips:
  - Все блоки, которые непосредственно находятся внутри контейнера называются _Flex-элементами_