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 éléments d'un conteneur. Avec Flexbox, vous pouvez contrôler l'alignement, la direction, l'ordre et la taille des éléments à l'intérieur d'un conteneur, créant ainsi 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. Cela se fait en définissant la propriété display d'un élément sur flex ou inline-flex. Une fois que vous avez créé un conteneur flex, 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 un 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. Certaines des propriétés les plus couramment utilisées incluent :

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 flex le long de l'axe transversal (par ex., flex-start, flex-end, center, baseline, stretch).
flex-wrap : Contrôle si les éléments flex doivent s'envelopper sur plusieurs lignes (wrap, nowrap, wrap-reverse).
align-content : Aligne les lignes flex lorsqu'il y a de l'espace supplémentaire dans l'axe transversal (semblable à 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 parente en un conteneur flex. 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.

Aide-mémoire

Pour créer un conteneur flex, définissez la propriété display sur flex :

.container {
    display: flex;
}

Cela transforme l'élément en un conteneur flex et ses enfants directs en éléments flex.

Propriétés Flexbox courantes pour contrôler la mise en page :

flex-direction : Direction des éléments flex (row, column, row-reverse, column-reverse)
justify-content : Aligne les éléments le long de l'axe principal (flex-start, flex-end, center, space-between, space-around)
align-items : Aligne les éléments le long de l'axe secondaire (flex-start, flex-end, center, baseline, stretch)
flex-wrap : Contrôle le retour à la ligne (wrap, nowrap, wrap-reverse)
align-content : Aligne les lignes flex lorsqu'il y a de l'espace supplémentaire sur l'axe secondaire

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>