Align Items

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

En CSS, la propriété align-items contrôle la manière dont les éléments flex sont alignés le long de l'axe transversal (l'opposé de l'axe principal). Elle aide à positionner les éléments verticalement dans une rangée 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 flex le long de l'axe transversal, qui peut être l'un des suivants :

stretch : c'est la valeur par défaut. Les éléments flex 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 flex sont placés au début de l'axe transversal.

flex-end : Les éléments flex 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 flex sont alignés de manière à ce que leurs lignes de base s'alignent.

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 flex au début de l'axe transversal, l'élément .container-center centrera ses éléments flex le long de l'axe transversal.

Défi

Facile

On vous donne un document HTML avec deux divisions (<div>), 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 flex 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 flex à la fin de l'axe transversal.

Aide-mémoire

La propriété align-items contrôle la manière dont les éléments flex sont alignés le long de l'axe transversal (opposé à l'axe principal) :

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

Valeurs disponibles :

stretch : Par défaut. Les éléments s'étirent pour remplir le conteneur
flex-start : Les éléments sont placés au début de l'axe transversal
flex-end : Les éléments sont placés à la fin de l'axe transversal
center : Les éléments sont centrés le long de l'axe transversal
baseline : Les éléments sont alignés sur leur ligne de base

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

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

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>