Направление Flex

Часть раздела Стилизация с CSS путешествия по HTML на Coddy. Урок 45 из 76.

В CSS свойство flex-direction определяет направление, в котором располагаются элементы внутри flex-контейнера. Оно определяет, будут ли элементы размещены в строку или в столбец.

Это также влияет на работу таких свойств, как justify-content и align-items. Правильное использование flex-direction помогает создавать гибкие и адаптивные макеты.

Вот базовый синтаксис использования свойства flex-direction:

.container {
    display: flex;
    flex-direction: value;
}

value: Желаемое направление для flex-элементов, которым может быть одно из следующих:

row: Это значение по умолчанию. Элементы flex размещаются в строке слева направо. Главная ось горизонтальная, а поперечная ось вертикальная.

row-reverse: Элементы flex размещаются в строке справа налево. Главная ось горизонтальная, а поперечная ось вертикальная.

column: Элементы Flex располагаются в столбце сверху вниз. Главная ось вертикальная, а поперечная ось горизонтальная.

column-reverse: Элементы flex размещаются в столбец снизу вверх. Главная ось вертикальная, а поперечная — горизонтальная.

Например:

.container-row {
    display: flex;
    flex-direction: row;
}

.container-row-reverse {
    display: flex;
    flex-direction: row-reverse;
}

В этом примере элемент .container-row будет отображать свои flex-элементы в строку слева направо, а элемент .container-row-reverse будет отображать их справа налево.

Задание

Легко

Вам дан HTML-документ с двумя родительскими <div>-элементами, каждый из которых содержит три дочерних <div>-элемента. Родительские элементы <div> уже настроены как flex-контейнеры с помощью display: flex;. Ваша задача — использовать свойство flex-direction, чтобы изменить расположение flex-элементов.

Выполните следующие шаги:

Напишите CSS-правило, которое выбирает элемент <div> с классом container1.
- Установите для свойства flex-direction значение column, чтобы расположить flex-элементы вертикальным столбцом.
Напишите CSS-правило, которое выбирает элемент <div> с классом container2.
- Установите для свойства flex-direction значение column-reverse, чтобы расположить flex-элементы в обратном порядке столбцом.

Попробуйте сами

<html>
<head>
    <title>Flex Direction</title>
    <style>
        .container1, .container2 {
            display: flex;
        }
        /* Write CSS rules here */
    </style>
</head>
<body>
    <div class="container1">
        <div>Item 1</div>
        <div>Item 2</div>
        <div>Item 3</div>
    </div>
    <br>
    <div class="container2">
        <div>Another Item 1</div>
        <div>Another Item 2</div>
        <div>Another Item 3</div>
    </div>
</body>
</html>