Défi Flexbox

Fait partie de la section Style avec CSS du Journey HTML de Coddy. Leçon 49 sur 76.

Défi

Facile

Maintenant que tu maîtrises les notions fondamentales de Flexbox, notamment display: flex;, flex-direction, justify-content et align-items, il est temps de mettre tes connaissances à l’épreuve avec un défi complet. Ce défi t’aidera à consolider ta compréhension de la façon d’utiliser ces propriétés ensemble pour créer des mises en page flexibles et responsives. Tu appliqueras ce que tu as appris sur chaque propriété afin de recréer un design spécifique.

On te fournit un document HTML contenant une division parente (<div>) qui contient quatre divisions enfants (<div>). Ta tâche consiste à utiliser les propriétés Flexbox que tu as apprises pour styliser ces éléments afin qu’ils correspondent au design présenté dans l’image ci-dessous :

Suis les étapes ci-dessous :

Écris une règle CSS qui cible l’élément <div> doté de la classe container.
Définis la propriété display de l’élément .container sur flex afin de le transformer en conteneur flex.
Définis la propriété flex-direction de l’élément .container sur row-reverse afin de disposer les éléments flex sur une ligne de droite à gauche.
Définis la propriété justify-content de l’élément .container sur space-between afin de répartir uniformément les éléments flex en laissant de l’espace entre eux.
Définis la propriété align-items de l’élément .container sur flex-end afin d’aligner les éléments flex à l’extrémité de l’axe transversal.
Écris 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 espacements internes), 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>