Desafío de Flex Box

Parte de la sección Estilos con CSS del Journey de HTML de Coddy. Lección 49 de 76.

Desafío

Fácil

Ahora que has dominado los fundamentos de Flexbox, incluidos display: flex;, flex-direction, justify-content y align-items, es hora de poner a prueba tus conocimientos con un desafío completo. Este desafío te ayudará a consolidar tu comprensión de cómo usar estas propiedades conjuntamente para crear diseños flexibles y adaptables. Aplicarás lo que has aprendido sobre cada propiedad para recrear un diseño específico.

Se te proporciona un documento HTML con una división principal (<div>) que contiene cuatro divisiones secundarias (<div>). Tu tarea es usar las propiedades de Flexbox que has aprendido para aplicar estilos a estos elementos de modo que coincidan con el diseño que se muestra en la imagen siguiente:

Sigue los pasos siguientes:

Escribe una regla CSS que seleccione el elemento <div> con la clase container.
Establece la propiedad display del elemento .container en flex para convertirlo en un contenedor flex.
Establece la propiedad flex-direction del elemento .container en row-reverse para organizar los elementos flex en una fila de derecha a izquierda.
Establece la propiedad justify-content del elemento .container en space-between para distribuir los elementos flex uniformemente, dejando espacio entre ellos.
Establece la propiedad align-items del elemento .container en flex-end para alinear los elementos flex al final del eje transversal.
Escribe reglas CSS para aplicar estilos a los elementos flex individuales (item1, item2, item3, item4) con diferentes colores de fondo y tamaños (usando diferentes rellenos), como se muestra en la imagen.

Pruébalo tú mismo

<html>
<head>
    <title>Flex Box Challenge</title>
    <style>
        /* Write CSS rules here */
    </style>
</head>
<body>
    <div class="container">
        <div class="item1">Item 1</div>
        <div class="item2">Item 2</div>
        <div class="item3">Item 3</div>
        <div class="item4">Item 4</div>
    </div>
</body>
</html>