Курс CSS: Flex-контейнер

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

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

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

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

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

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

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

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

Например,

<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-элементами. На них не будут действовать правила, которые мы изучим в следующих уроках.

Задание

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

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

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