Alignement des éléments

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

En CSS, la propriété align-items contrôle l’alignement des éléments flexibles le long de l’axe transversal (l’opposé de l’axe principal). Elle aide à positionner les éléments verticalement dans une ligne ou horizontalement dans une colonne. Cette propriété est utile pour rendre les mises en page plus flexibles et réactives.

Voici la syntaxe de base pour utiliser la propriété align-items :

.container {
    display: flex;
    align-items: value;
}

value : L’alignement souhaité pour les éléments flexibles le long de l’axe transversal, qui peut être l’une des valeurs suivantes :

stretch : Il s’agit de la valeur par défaut. Les éléments flexibles sont étirés pour remplir le conteneur le long de l’axe transversal tout en respectant min-width/max-width et min-height/max-height.

flex-start : Les éléments flexibles sont placés au début de l’axe transversal.

flex-end : Les éléments flexibles sont placés à la fin de l’axe transversal.

center : Les éléments flex sont centrés le long de l’axe transversal.

baseline : Les éléments flexibles sont alignés de manière à ce que leurs lignes de base soient alignées.

Par exemple :

.container-start {
    display: flex;
    align-items: flex-start;
}

.container-center {
    display: flex;
    align-items: center;
}

Dans cet exemple, l’élément .container-start alignera ses éléments flexibles au début de l’axe transversal, tandis que l’élément .container-center centrera ses éléments flexibles le long de l’axe transversal.

Défi

Facile

Un document HTML comportant deux divisions (<div>) vous est fourni, chacune contenant trois divisions enfants.

Suivez les étapes ci-dessous :

Stylez l’élément <strong>.seas</strong> :
- Écrivez une règle CSS qui cible l’élément <div> avec la classe .seas.
- Définissez display sur flex pour permettre le positionnement flexible des éléments enfants.
- Définissez la propriété align-items sur center pour aligner les éléments flexibles au milieu de l’axe transversal.
Stylez l’élément <strong>.oceans</strong> :
- Écrivez une règle CSS qui cible l’élément <div> avec la classe .oceans.
- Définissez display sur flex pour permettre le positionnement flexible des éléments enfants.
- Définissez la propriété align-items sur flex-end pour aligner les éléments flexibles à l’extrémité de l’axe transversal.

Essayez vous-même

<html>
<head>
    <title>Align Items</title>
    <style>
        .container {
            display: flex;
            height: 200px; /* Added for visualization */
            border: 2px solid darkblue; /* Added for visualization */
        }
        /* Write CSS rules here */
    </style>
</head>
<body>
    <div class="container">
        <div class="seas">
            <div>Black Sea</div>
            <div>Caribbean Sea</div>
            <div>Dead Sea</div>
        </div>
        <div class="oceans">
            <div>Atlantic Ocean</div>
            <div>Pacific Ocean</div>
            <div>Indian Ocean</div>
        </div>
    </div>
</body>
</html>