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

CSS: Направление Flex-элементов

Если немного погрузиться в теорию работы модуля Flex, то станет понятно, что это некая ось, на которую «насаживаются» элементы. Почти как кубики на железку или костяшки на счёты.

Как и в реальном мире, мы можем поворачивать главную ось, чтобы расположить элементы по другому. Для этого используется свойство flex-direction, которое может принимать одно из четырех значений:

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

Row

1
2
3

Row-reverse

1
2
3

Column

1
2
3

Column-reverse

1
2
3

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

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

Задание

Доработайте стили для блока с вопросами и ответами:

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

  .question {
    width: 40%;
    padding: 20px;

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

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

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

Заказчик просит вас поменять местами блок с вопросом и ответом. Воспользуйтесь изученными возможностями, чтобы сделать это без редактирования HTML. Скопируйте весь код в редактор и допишите нужные стили

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

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

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

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

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

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

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

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

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

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


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