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’axe opposé à 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 adaptatives.

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

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

value : L’alignement souhaité des éléments flex 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 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 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 flex sont alignés de sorte 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, et l’élément .container-center centrera ses éléments flexibles le long de l’axe transversal.

Défi

Facile

On vous donne un document HTML avec deux éléments (<div>), contenant chacun trois éléments enfants.

Suivez les étapes ci-dessous :

Stylisez l’élément .seas :
- Écrivez une règle CSS qui cible l’élément <div> ayant 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.
Stylisez l’élément .oceans :
- Écrivez une règle CSS qui cible l’élément <div> ayant 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 à 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>