Frontend | Вопросы собесов

🤔 Как изменить направление оси flexbox контейнера?

Чтобы изменить направление оси flexbox-контейнера, нужно использовать свойство CSS flex-direction. Это свойство определяет основную ось контейнера и направление размещения flex-элементов.

🚩

Возможных значения flex-direction

🟠

row:

Основная ось — горизонтальная, элементы располагаются слева направо. Это значение по умолчанию.

🟠

row-reverse:

Основная ось — горизонтальная, элементы располагаются справа налево.

🟠

column:

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

🟠

column-reverse:

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

🚩

Примеры использования:

Горизонтальное направление (слева направо):

.container {

    display: flex;

    flex-direction: row; /* или просто не указывать, так как это значение по умолчанию */

}

Горизонтальное направление (справа налево):

.container {

    display: flex;

    flex-direction: row-reverse;

}

Вертикальное направление (сверху вниз):

.container {

    display: flex;

    flex-direction: column;

}

Вертикальное направление (снизу вверх):

.container {

    display: flex;

    flex-direction: column-reverse;

}

Пример HTML и CSS:

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Flexbox Direction</title>

    <style>

        .container {

            display: flex;

            flex-direction: row; /* Измените значение на row-reverse, column, или column-reverse для проверки разных направлений */

            border: 1px solid #000;

            height: 200px;

        }

        .item {

            flex: 1;

            border: 1px solid #ccc;

            padding: 10px;

            margin: 5px;

            text-align: center;

        }

    </style>

</head>

<body>

    <div class="container">

        <div class="item">Item 1</div>

        <div class="item">Item 2</div>

        <div class="item">Item 3</div>

    </div>

</body>

</html>

Ставь 👍 и забирай 📚 Базу знаний