Qu'est-ce que le Flex Box ?

Fait partie de la section Styling with CSS du Journey HTML de Coddy. Leçon 44 sur 76.

En CSS, la mise en page Flexbox est un outil puissant qui offre un moyen efficace d’aligner et de répartir l’espace entre les items dans un container. Avec Flexbox, vous pouvez contrôler l’alignement, la direction, l’ordre et la taille des éléments au sein d’un container, afin de créer des mises en page flexibles et dynamiques qui s’adaptent aux différentes tailles d’écran et aux différents appareils.

Pour utiliser Flexbox, vous devez d’abord définir un conteneur flex. Pour cela, définissez la propriété display d’un élément sur flex ou inline-flex. Une fois le conteneur flex créé, ses enfants directs deviennent automatiquement des éléments flex.

Voici la syntaxe de base pour créer un conteneur flex :

.container {
    display: flex;
}

display: flex; : Cette déclaration transforme l’élément sélectionné en conteneur flex et ses enfants directs en éléments flex.

Une fois que vous disposez d’un conteneur flex, vous pouvez utiliser différentes propriétés de Flexbox pour contrôler la mise en page de ses éléments flex. Parmi les propriétés les plus couramment utilisées figurent :

flex-direction : Spécifie la direction des éléments flex (row, column, row-reverse, column-reverse).
justify-content : Aligne les éléments flex le long de l’axe principal (par exemple, flex-start, flex-end, center, space-between, space-around).

align-items : Aligne les éléments flexibles le long de l’axe transversal (par exemple, flex-start, flex-end, center, baseline, stretch).
flex-wrap : Contrôle si les éléments flexibles doivent passer sur plusieurs lignes (wrap, nowrap, wrap-reverse).
align-content : Aligne les lignes flexibles lorsqu’il y a de l’espace supplémentaire sur l’axe transversal (similaire à justify-content, mais pour plusieurs lignes).

Défi

Facile

Un document HTML vous est fourni avec une division (<div>) qui contient trois divisions enfants (<div>). Votre tâche consiste à utiliser la propriété display: flex; pour transformer la division parente en conteneur flex. Suivez les étapes ci-dessous :

Écrivez une règle CSS qui cible l’élément <div> possédant la classe container.
Définissez la propriété display de l’élément .container sur flex.

Essayez vous-même

<html>
<head>
    <title>What is a Flex Box?</title>
    <style>
        /* Write CSS rules here */
    </style>
</head>
<body>
    <div class="container">
        <div>Item 1</div>
        <div>Item 2</div>
        <div>Item 3</div>
    </div>
</body>
</html>