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>