Sfida Flexbox

Fa parte della sezione Stilizzare con CSS del percorso HTML di Coddy. Lezione 49 di 76.

Sfida

Facile

Ora che hai acquisito padronanza dei fondamenti di Flexbox, inclusi display: flex;, flex-direction, justify-content e align-items, è il momento di mettere alla prova le tue conoscenze con una sfida completa. Questa sfida ti aiuterà a consolidare la comprensione di come usare queste proprietà insieme per creare layout flessibili e responsivi. Metterai in pratica ciò che hai imparato su ciascuna proprietà per ricreare un design specifico.

Ti viene fornito un documento HTML con un elemento contenitore (<div>) che contiene quattro elementi figli (<div>). Il tuo compito è usare le proprietà Flexbox che hai imparato per applicare uno stile a questi elementi e farli corrispondere al design mostrato nell'immagine qui sotto:

Segui i passaggi qui sotto:

Scrivi una regola CSS che selezioni l'elemento <div> con la classe container.
Imposta la proprietà display dell'elemento .container su flex per trasformarlo in un contenitore flex.
Imposta la proprietà flex-direction dell'elemento .container su row-reverse per disporre gli elementi flex in una riga da destra a sinistra.
Imposta la proprietà justify-content dell'elemento .container su space-between per distribuire gli elementi flex in modo uniforme, lasciando spazio tra loro.
Imposta la proprietà align-items dell'elemento .container su flex-end per allineare gli elementi flex all'estremità dell'asse trasversale.
Scrivi regole CSS per applicare uno stile ai singoli elementi flex (item1, item2, item3, item4) con colori di sfondo e dimensioni diverse (usando padding diversi), come mostrato nell'immagine.

Provalo tu

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