Flex Direction

Parte da seção Styling with 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 filho <strong><div></strong>. Os elementos pai <div> 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 tenha como alvo o elemento <div> com a classe container1.
- Defina sua propriedade flex-direction como column para organizar os itens flex em uma coluna vertical.
Escreva uma regra CSS que tenha como alvo o elemento <div> com a classe container2.
- Defina sua propriedade flex-direction como column-reverse para organizar os itens flex em uma coluna invertida.

Folha de consulta

A propriedade flex-direction controla a direção na qual os itens são organizados dentro de um contêiner flex:

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

Valores:

row: Padrão. Itens posicionados da esquerda para a direita (eixo principal horizontal)
row-reverse: Itens posicionados da direita para a esquerda (eixo principal horizontal)
column: Itens posicionados de cima para baixo (eixo principal vertical)
column-reverse: Itens posicionados de baixo para cima (eixo principal vertical)

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

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

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>