Direção da Flex Box

Parte da seção Estilização com CSS do Journey de HTML da Coddy. Lição 45 de 76.

No CSS, a propriedade flex-direction controla a direção na qual os itens são organizados dentro de um contêiner flex. Ela decide se os itens são colocados em uma linha ou em uma coluna.

Isso também afeta como propriedades como justify-content e align-items funcionam. O uso correto de flex-direction ajuda na construção de layouts flexíveis e responsivos.

Aqui está a sintaxe básica para usar a propriedade flex-direction:

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

value: A direção desejada para os itens flex, que pode ser uma das seguintes:

row: Este é o valor padrão. Os itens flex são posicionados em uma linha, da esquerda para a direita. O eixo principal é horizontal e o eixo transversal é vertical.

row-reverse: Os itens flexíveis são posicionados em uma linha, da direita para a esquerda. O eixo principal é horizontal e o eixo transversal é vertical.

column: Os itens flexíveis são posicionados em uma coluna, de cima para baixo. O eixo principal é vertical, e o eixo transversal é horizontal.

column-reverse: Os itens flexíveis são posicionados em uma coluna, de baixo para cima. O eixo principal é vertical, e o eixo transversal é horizontal.

Por exemplo:

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

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

Neste exemplo, o elemento .container-row exibirá seus itens flex em uma linha da esquerda para a direita, o elemento .container-row-reverse os exibirá da direita para a esquerda.

Desafio

Fácil

Você recebeu um documento HTML com dois elementos pai <strong><div></strong>, cada um contendo três elementos <strong><div></strong> filhos. Os elementos <div> pai já foram definidos como contêineres flex usando display: flex;. Sua tarefa é usar a propriedade flex-direction para alterar a disposição dos itens flex.

Siga as etapas abaixo:

Escreva uma regra CSS que selecione o elemento <div> com a classe container1.
- Defina a propriedade flex-direction como column para organizar os itens flex em uma coluna vertical.
Escreva uma regra CSS que selecione o elemento <div> com a classe container2.
- Defina a propriedade flex-direction como column-reverse para organizar os itens flex em uma coluna invertida.

Experimente você mesmo

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