Desafío de Flex Box

Parte de la sección Styling with CSS del Journey de HTML de Coddy. Lección 49 de 76.

Desafío

Fácil

Ahora que has dominado los fundamentos de Flexbox, incluyendo display: flex;, flex-direction, justify-content y align-items, es hora de poner a prueba tus conocimientos con un desafío integral. Este desafío te ayudará a consolidar tu comprensión sobre cómo usar estas propiedades juntas para crear diseños flexibles y responsivos. 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 padre (<div>) que contiene cuatro divisiones hijas (<div>). Tu tarea es utilizar las propiedades de Flexbox que has aprendido para dar estilo a estos elementos para que coincidan con el diseño que se muestra en la imagen a continuación:

Sigue los pasos a continuación:

Escribe una regla CSS que apunte al elemento <div> con la clase container.
Establece la propiedad display del elemento .container a flex para convertirlo en un contenedor flex.
Establece la propiedad flex-direction del elemento .container a row-reverse para organizar los elementos flex en una fila de derecha a izquierda.
Establece la propiedad justify-content del elemento .container a space-between para distribuir los elementos flex uniformemente con espacio entre ellos.
Establece la propiedad align-items del elemento .container a flex-end para alinear los elementos flex al final del eje transversal.
Escribe reglas CSS para dar estilo 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>