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 offre un moyen efficace d’aligner les éléments d’un conteneur et de répartir l’espace entre eux. Avec Flexbox, tu peux contrôler l’alignement, la direction, l’ordre et la taille des éléments dans un conteneur, afin de créer des mises en page flexibles et dynamiques qui s’adaptent à différentes tailles d’écran et à différents appareils.

Pour utiliser Flexbox, tu dois d’abord définir un conteneur flex. Pour cela, définis 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.
display: inline-flex; : Crée un conteneur flex en ligne : l’élément se comporte comme un élément en ligne, mais ses enfants deviennent des éléments flex dotés de toutes les fonctionnalités de Flexbox.

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. Voici quelques-unes des propriétés les plus couramment utilisées :

flex-direction : définit 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 flex le long de l’axe transversal (par exemple, flex-start, flex-end, center, baseline, stretch).
flex-wrap : Contrôle si les éléments flex doivent passer sur plusieurs lignes (wrap, nowrap, wrap-reverse).
align-content : Aligne les lignes flex lorsqu’il y a de l’espace supplémentaire sur l’axe transversal (comme justify-content, mais pour plusieurs lignes).

Défi

Facile

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

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