Justification du contenu

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

En CSS, la propriété justify-content contrôle la façon dont les éléments flexibles sont espacés le long de l’axe principal d’un conteneur flex. Elle aide à aligner les éléments et à répartir l’espace supplémentaire lorsqu’il reste de la place. Cette propriété est utile pour positionner les éléments horizontalement (dans une ligne) ou verticalement (dans une colonne), ce qui rend 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 flexibles 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 flexibles au début de l’axe principal, tandis que l’élément .container-center centrera ses éléments flexibles le long de l’axe principal.

Défi

Facile

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

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

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>