Flex Direction

Parte de la sección Styling with CSS del Journey de HTML de Coddy — lección 45 de 76.

En CSS, la propiedad flex-direction controla la dirección en la que se organizan los elementos dentro de un contenedor flex. Determina si los elementos se colocan en una fila o en una columna.

Esto también afecta a cómo funcionan propiedades como justify-content y align-items. El uso correcto de flex-direction ayuda a crear diseños flexibles y adaptables.

Aquí tienes la sintaxis básica para usar la propiedad flex-direction:

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

value: La dirección deseada para los elementos flex, que puede ser una de las siguientes:

row: Este es el valor predeterminado. Los elementos flex se colocan en una fila, de izquierda a derecha. El eje principal es horizontal y el eje transversal es vertical.

row-reverse: Los elementos flex se colocan en una fila, de derecha a izquierda. El eje principal es horizontal y el eje transversal es vertical.

column: Los elementos flex se colocan en una columna, de arriba hacia abajo. El eje principal es vertical y el eje transversal es horizontal.

column-reverse: Los elementos flex se colocan en una columna, de abajo hacia arriba. El eje principal es vertical y el eje transversal es horizontal.

Por ejemplo:

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

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

En este ejemplo, el elemento .container-row mostrará sus elementos flex en una fila de izquierda a derecha, mientras que el elemento .container-row-reverse los mostrará de derecha a izquierda.

Desafío

Fácil

Se te proporciona un documento HTML con dos elementos <strong><div></strong> padre, cada uno con tres elementos <strong><div></strong> hijos. Los elementos <div> padre ya se han configurado como contenedores flex usando display: flex;. Tu tarea es usar la propiedad flex-direction para cambiar la disposición de los elementos flex.

Sigue los pasos a continuación:

Escribe una regla CSS que apunte al elemento <div> con la clase container1.
- Establece su propiedad flex-direction en column para organizar los elementos flex en una columna vertical.
Escribe una regla CSS que apunte al elemento <div> con la clase container2.
- Establece su propiedad flex-direction en column-reverse para organizar los elementos flex en una columna invertida.

Hoja de referencia

La propiedad flex-direction controla la dirección en la que se organizan los elementos dentro de un contenedor flex:

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

Valores:

row: Por defecto. Los elementos se colocan de izquierda a derecha (eje principal horizontal)
row-reverse: Los elementos se colocan de derecha a izquierda (eje principal horizontal)
column: Los elementos se colocan de arriba hacia abajo (eje principal vertical)
column-reverse: Los elementos se colocan de abajo hacia arriba (eje principal vertical)

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

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

Pruébalo tú mismo

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