Qu’est-ce que Flexbox ?

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

En CSS, la mise en page Flexbox est un outil puissant qui permet d’aligner les éléments d’un conteneur et de répartir l’espace entre eux de manière efficace. Avec Flexbox, tu peux contrôler l’alignement, la direction, l’ordre et la taille des éléments dans un conteneur, et créer des mises en page flexibles et dynamiques qui s’adaptent à différentes tailles d’écran et à 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 avez un conteneur flex, vous pouvez utiliser diverses propriétés Flexbox pour contrôler la disposition de ses éléments flex. Parmi les propriétés les plus couramment utilisées, on trouve :

flex-direction : Spécifie la direction des éléments flexibles (row, column, row-reverse, column-reverse).
justify-content : Aligne les éléments flexibles 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

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

Écrivez une règle CSS qui cible l’élément <div> ayant 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>