Flex Direction

Часть раздела Styling with 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-документ с двумя родительскими элементами <strong><div></strong>, каждый из которых содержит три дочерних элемента <strong><div></strong>. Родительские элементы <div> уже установлены как flex-контейнеры с помощью display: flex;. Ваша задача — использовать свойство flex-direction, чтобы изменить расположение flex-элементов.

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

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

Шпаргалка

Свойство flex-direction управляет направлением, в котором элементы располагаются внутри flex-контейнера:

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

Значения:

row: По умолчанию. Элементы располагаются слева направо (горизонтальная главная ось)
row-reverse: Элементы располагаются справа налево (горизонтальная главная ось)
column: Элементы располагаются сверху вниз (вертикальная главная ось)
column-reverse: Элементы располагаются снизу вверх (вертикальная главная ось)

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

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

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

<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>