CSS Academy · Leçon

Remplacement de l’alignement des éléments flex avec align-self

Remplacez align-items du conteneur pour des éléments flex individuels avec align-self.

Remplacement de l’alignement des éléments flex avec align-self est une leçon CSS Academy gratuite sur CoddyKit. Ceci est la leçon 1 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage CSS Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours CSS Academy comprend 4 leçons au total.

Qu’est-ce que align-self ?

align-self remplace le réglage align-items du conteneur flexible pour un élément flexible donné. Cette propriété s’applique aux éléments individuels, et non au conteneur.

Valeurs de align-self

Cette propriété accepte les mêmes valeurs que align-items :

auto — hérite de align-items du conteneur (valeur par défaut)
flex-start — aligne au début de l’axe transversal
flex-end — aligne à la fin de l’axe transversal
center — centre sur l’axe transversal
stretch — étire pour remplir la taille transversale
baseline — aligne les lignes de base du texte

Exemple pratique

Une navigation dont la plupart des éléments sont centrés, tandis que le dernier bouton est aligné à l’extrémité :

<nav class="nav">
  <span>Logo</span>
  <a href="#">Link</a>
  <button class="cta-button">Sign Up</button>
</nav>

Étirer un seul élément

Faites qu’une carte s’étire sur toute la hauteur tandis que les autres s’adaptent à leur contenu :

<div class="sidebar-layout">
  <div>Content</div>
  <div class="ad-unit">Ad</div>
</div>

margin: auto pour l’alignement

Les marges automatiques sur les éléments flexibles se repoussent elles-mêmes, ou repoussent leurs voisins, vers le côté opposé. Il s’agit d’une alternative puissante à align-self pour centrer ou répartir l’espace.

<nav class="nav">
  <span class="logo">Logo</span>
  <a href="#">Home</a>
  <a href="#">About</a>
  <span class="settings">&#9881;</span>
</nav>

margin: auto pour le centrage vertical

Les marges automatiques fonctionnent également verticalement. margin-top: auto dans un conteneur flexible en colonne pousse un élément vers le bas :

<div class="card">
  <p>Card body</p>
  <div class="card-footer">Footer</div>
</div>

Alignement sur la ligne de base

Aligner les éléments sur la ligne de base du texte conserve des relations lisibles entre des éléments de tailles différentes :

<div class="stats-row">
  <span class="big-number">42</span>
  <span class="label">users</span>
</div>

align-self: auto (valeur par défaut)

align-self: auto indique à l’élément d’utiliser la valeur align-items du conteneur. Vous ne devez définir align-self que lorsque vous souhaitez vous écarter de la valeur par défaut du conteneur.

Axe transversal et axe principal

Souvenez-vous-en : align-self agit toujours sur l’axe transversal. Si flex-direction: column est défini, l’axe transversal est horizontal ; align-self contrôle donc le positionnement à gauche et à droite.

Combiner align-self avec flex-grow

Un modèle courant : agrandir un élément pour remplir l’espace ET remplacer son alignement transversal :

<div class="features">
  <div class="feature-card">Feature A</div>
  <div>Feature B</div>
</div>

Alignement de Grid et de Flexbox

CSS Grid possède à la fois align-self (axe des lignes) et justify-self (axe des colonnes) pour le contrôle 2D. align-self de Flexbox ne contrôle que l’axe transversal ; utilisez margin: auto pour l’axe principal.

Vérification rapide

Un conteneur flexible possède align-items: center. Un élément doit être aligné en haut de l’axe transversal. Quelle propriété devez-vous définir sur cet élément ?

Récapitulatif

align-self remplace la propriété align-items du conteneur flexible pour les éléments individuels. Utilisez-la pour modifier le modèle d’alignement de certains éléments. margin: auto est un outil complémentaire qui répartit l’espace restant afin de pousser les éléments le long de l’un ou l’autre axe.

Questions Fréquemment Posées

La leçon « Remplacement de l’alignement des éléments flex avec align-self » est-elle gratuite ?

Oui — le texte complet de « Remplacement de l’alignement des éléments flex avec align-self » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours CSS Academy, passe à CoddyKit PRO. Le cours CSS Academy comprend 4 leçons au total.

Qu'est-ce que j'apprendrai dans « Remplacement de l’alignement des éléments flex avec align-self » ?

Remplacez align-items du conteneur pour des éléments flex individuels avec align-self. Tu pratiques CSS Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.

Dois-je avoir de l'expérience pour commencer CSS Academy ?

Aucune expérience préalable n'est requise. CSS Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 1 sur 4.

Combien de temps prend la leçon « Remplacement de l’alignement des éléments flex avec align-self » ?

La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.

Peux-tu écrire et exécuter du code dans cette leçon CSS Academy ?

Oui. Chaque leçon CSS Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.

Toutes les leçons de ce cours

Remplacement de l’alignement des éléments flex avec align-self
Propriété order et réorganisation visuelle
Notations abrégées flex
Mises en page Flexbox courantes : navigation, cartes et objets média

← Retour à CSS Academy