Direção da Flex Box

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

Em CSS, a propriedade flex-direction controla a direção em que os itens são organizados dentro de um contêiner flexível. Ela determina se os itens são dispostos em uma linha ou em uma coluna.

Isso também afeta o funcionamento de propriedades como justify-content e align-items. Usar flex-direction corretamente ajuda a criar 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 colocados em uma linha, da esquerda para a direita. O eixo principal é horizontal, e o eixo transversal é vertical.

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

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

column-reverse: Os itens flex são dispostos 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, e o elemento .container-row-reverse os exibirá da direita para a esquerda.

Desafio

Fácil

Você recebeu um documento HTML com dois elementos <div> pai, cada um contendo três elementos <div> filhos. Os elementos <div> pai já foram definidos como contêineres flex usando display: flex;. Sua tarefa é usar a propriedade flex-direction para alterar o arranjo 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>