Défi Flex Box

Fait partie de la section Styling with CSS du Journey HTML de Coddy — leçon 49 sur 76.

Défi

Facile

Maintenant que vous maîtrisez les bases de Flexbox, y compris display: flex;, flex-direction, justify-content, et align-items, il est temps de mettre vos connaissances à l'épreuve avec un défi complet. Ce défi vous aidera à consolider votre compréhension de la manière d'utiliser ces propriétés ensemble pour créer des mises en page flexibles et réactives. Vous appliquerez ce que vous avez appris sur chaque propriété pour recréer un design spécifique.

On vous donne un document HTML avec une division parente (<div>) qui contient quatre divisions enfants (<div>). Votre tâche consiste à utiliser les propriétés Flexbox que vous avez apprises pour styliser ces éléments afin qu'ils correspondent au design illustré dans l'image ci-dessous :

Suivez les étapes ci-dessous :

Écrivez une règle CSS qui cible l'élément <div> avec la classe container.
Définissez la propriété display de l'élément .container sur flex pour en faire un conteneur flex.
Définissez la propriété flex-direction de l'élément .container sur row-reverse pour disposer les éléments flex en ligne de droite à gauche.
Définissez la propriété justify-content de l'élément .container sur space-between pour répartir les éléments flex uniformément avec de l'espace entre eux.
Définissez la propriété align-items de l'élément .container sur flex-end pour aligner les éléments flex à la fin de l'axe transversal.
Écrivez des règles CSS pour styliser les éléments flex individuels (item1, item2, item3, item4) avec différentes couleurs d'arrière-plan et tailles (en utilisant différents paddings) comme indiqué dans l'image.

Essayez vous-même

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