Justify Content

Fait partie de la section Styling with CSS du Journey HTML de Coddy — leçon 46 sur 76.

En CSS, la propriété justify-content contrôle l'espacement des éléments flex le long de l'axe principal d'un conteneur flex. Elle aide à aligner les éléments et à distribuer l'espace supplémentaire lorsqu'il reste de la place. Cette propriété est utile pour positionner les éléments horizontalement (en ligne) ou verticalement (en colonne), rendant les mises en page plus flexibles et réactives.

Voici la syntaxe de base pour utiliser la propriété justify-content :

.container {
    display: flex;
    justify-content: value;
}

value : L'alignement souhaité pour les éléments flex le long de l'axe principal, qui peut être l'un des suivants :

flex-start : C'est la valeur par défaut. Les éléments sont regroupés vers le début de la ligne.

flex-end: Les éléments sont regroupés vers la fin de la ligne.

center : Les éléments sont centrés le long de la ligne.

space-between: Les éléments sont répartis uniformément le long de la ligne, le premier élément étant au début et le dernier à la fin.

space-around : Les éléments sont répartis uniformément le long de la ligne, avec un espace égal autour d'eux.

space-evenly : Les éléments sont répartis de manière à ce que l'espacement entre deux éléments quelconques (et l'espace par rapport aux bords) soit égal.

Par exemple :

.container-start {
    display: flex;
    justify-content: flex-start;
}

.container-center {
    display: flex;
    justify-content: center;
}

Dans cet exemple, l'élément .container-start alignera ses éléments flex au début de l'axe principal, l'élément .container-center centrera ses éléments flex le long de l'axe principal.

Défi

Facile

On vous donne un document HTML avec deux divisions (<div>) qui contiennent trois divisions enfants (<div>). Les divisions parentes ont déjà été définies comme un conteneur flex à l'aide de display: flex;. Votre tâche consiste à utiliser la propriété justify-content pour aligner les éléments flex le long de l'axe principal. Suivez les étapes ci-dessous :

Écrivez une règle CSS qui cible l'élément <div> avec la classe fruits.
Définissez la propriété justify-content de l'élément .fruits sur center pour centrer les éléments flex le long de l'axe principal.
Écrivez une règle CSS qui cible l'élément <div> avec la classe vegetables.
Définissez la propriété justify-content de l'élément .vegetables sur space-between pour répartir les éléments flex le long de l'axe principal.

Aide-mémoire

La propriété justify-content contrôle la manière dont les éléments flex sont espacés le long de l'axe principal d'un conteneur flex :

.container {
    display: flex;
    justify-content: value;
}

Valeurs disponibles :

flex-start : Éléments regroupés vers le début (par défaut)
flex-end : Éléments regroupés vers la fin
center : Éléments centrés le long de la ligne
space-between : Éléments répartis uniformément, le premier au début, le dernier à la fin
space-around : Éléments répartis uniformément avec un espace égal autour d'eux
space-evenly : Éléments répartis avec un espacement égal entre n'importe quels deux éléments

.container-start {
    display: flex;
    justify-content: flex-start;
}

.container-center {
    display: flex;
    justify-content: center;
}

Essayez vous-même

<html>
<head>
    <title>Justify Content</title>
    <style>
        .fruits, .vegetables {
            display: flex;
        }
        /* Write CSS rules here */
    </style>
</head>
<body>
    <div class="fruits">
        <div>Apple</div>
        <div>Banana</div>
        <div>Mango</div>
    </div>
    <div class="vegetables">
        <div>Tomato</div>
        <div>Potato</div>
        <div>Cucumber</div>
    </div>
</body>
</html>