Расположение элементов на странице — одна из важных областей работы верстальщика или фронтенд-разработчика. Во всех прошлых уроках мы добавляли небольшие элементы, но их расположение определялось только тем, как они были добавлены в 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, внутри которого будет два элемента:
Какие языки программирования наиболее востребованы в 2023?. Блок имеет ширину 40%. Класс для блока: questionСамыми популярными языками для изучения в 2023 году остаются Python и JavaScript. Ширина блока 60%. Класс для блока: answerПопробуйте самостоятельно стилизовать элементы, чтобы сделать из этого блока настоящий блок с вопросами и ответами. Тесты будут проверять только правильное использование контейнера
Если вы зашли в тупик, то самое время задать вопрос в «Обсуждениях». Как правильно задать вопрос:
Тесты устроены таким образом, что они проверяют решение разными способами и на разных данных. Часто решение работает с одними входными данными, но не работает с другими. Чтобы разобраться с этим моментом, изучите вкладку «Тесты» и внимательно посмотрите на вывод ошибок, в котором есть подсказки.
Это нормально 🙆, в программировании одну задачу можно выполнить множеством способов. Если ваш код прошел проверку, то он соответствует условиям задачи.
В редких случаях бывает, что решение подогнано под тесты, но это видно сразу.
Создавать обучающие материалы, понятные для всех без исключения, довольно сложно. Мы очень стараемся, но всегда есть что улучшать. Если вы встретили материал, который вам непонятен, опишите проблему в «Обсуждениях». Идеально, если вы сформулируете непонятные моменты в виде вопросов. Обычно нам нужно несколько дней для внесения правок.
Кстати, вы тоже можете участвовать в улучшении курсов: внизу есть ссылка на исходный код уроков, который можно править прямо из браузера.
Все блоки, которые непосредственно находятся внутри контейнера называются Flex-элементами