Dirección de Flex

Parte de la sección Estilos con 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. Usar flex-direction correctamente ayuda a crear diseños flexibles y adaptables.

Esta es 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 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 flexibles en una fila de izquierda a derecha, y el elemento .container-row-reverse los mostrará de derecha a izquierda.

Desafío

Fácil

Se te proporciona un documento HTML con dos elementos padre <div>, cada uno con tres elementos hijo <div>. Los elementos padre <div> 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 estos pasos:

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

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>