Une remarque ? Une suggestion ?...

Merci de participer à l'amélioration de ce site. Prenez le temps de rédiger votre remarque le plus précisément possible :

CSS - Propriété align-items

align-items est une propriété CSS, qui gère le positionnement du contenu dans un bandeau de container flexible ou dans une cellule de grille. Cet alignement prend en compte la direction et le sens d'écriture de la langue utilisée.

Description de la propriété align-items.

Application à un flex-box.

La propriété align-items gère la disposition des enfants dans un flex box, suivant l'axe secondaire. La plupart du temps il s'agira de l'axe vertical. (rappel : l'axe secondaire et l'axe principal d'un flex-box sont définis par la propriété flex-direction).

Si les éléments enfants du flex-box se répartissent sur plusieurs lignes (flex-wrap:wrap) reportez-vous à la propriété align-content.

Pour gérer la disposition de chacun des enfants de façon indépendante, reportez-vous à la propriété align-self.

Application à une grille.

La propriété align-items gère la disposition verticale des éléments par rapport à la hauteur de leur ligne. Pour gérer la disposition des lignes elles-même, reportez-vous à la propriété align-content.

Valeurs pour align-items appliquée à un flex-box.

  • align-items: stretch;

    Valeur par défaut. Les éléments sont étirés pour remplir le container flex-box.

  • align-items: center;

    Les éléments sont centrés dans le container, suivant l'axe secondaire (le plus souvent verticalement).

  • align-items: flex-start;

    Les éléments sont positionnés au début du container flex-box. La notion de début dépend de la direction qui a été choisie pour le container avec Object. La plupart du temps cela correspondra au haut du flex-box.

  • align-items: flex-end;

    Les éléments sont positionnés à la fin du container flex-box. Comme pour flex-start la notion de fin dépend de la propriété Object mais la plupart du temps cela correspondra au bas du flex-box.

  • align-items: baseline;

    Les éléments sont positionnés verticalement par rapport à la ligne de base du texte.

  • align-items: inherit | initial | unset;

    Reportez-vous à la description générale de ces valeurs.

Valeurs pour align-items appliquée à une grille.

  • align-items: stretch;

    Valeur par défaut. Les éléments sont étirés verticalement pour remplir toute leur cellule.

  • align-items: center;

    Les éléments sont centrés verticalement au milieu de leur cellule (milieu de la ligne).

  • align-items: start;

    Les éléments sont alignés en haut de leur cellule.

  • align-items: end;

    Les éléments sont positionnés en bas de leur cellule.

  • align-items: baseline;

    Les éléments sont positionnés verticalement par rapport à la ligne de base du texte.

  • align-items: inherit | initial | unset;

    Reportez-vous à la description générale de ces valeurs.

Simulateur.


flex-direction :
align-items :
(flex-box)
align-items :
(grille)

Flex-box
1
 
2
 
3
Grille
1
 
2
 
3
4
5
6

Voir aussi...

Flex-box - Propriétés.

  • align-content : Disposition des lignes dans un flex-box ou une grille.
  • align-self : Position verticale de l'un des éléments dans un flex-box ou une grille.
  • display : Type de l'élément et la façon de l'afficher.
  • flex : Propriété raccourcie pour définir les principales caractéristiques d'un flex-box et des éléments internes.
  • flex-basis : Détermine la dimension par défaut d'un élément contenu dans un flex-box.
  • flex-direction : Choisit l'axe principal et l'axe secondaire d'un flex box.
  • flex-flow : Echaînement des éléments enfant dans un flex-box.
  • flex-grow : Autorise ou non l'agrandissement d'un élément contenu dans un flex-box.
  • flex-shrink : Autorise ou non la compression d'un élément contenu dans un flex-box.
  • flex-wrap : Gestion des retours à la ligne dans un container flex.
  • justify-content : Définit le positionnement horizontal dans un flex-box ou une grille.
  • order : Ordre des éléments dans un flex-box.

Grilles - Propriétés.

  • align-content : Disposition des lignes dans un flex-box ou une grille.
  • align-self : Position verticale de l'un des éléments dans un flex-box ou une grille.
  • grid : Propriété raccourcis définissant les principaux paramètres d'une grille.
  • grid-area : Positionne un élément dans une zone nommée de la grille.
  • grid-auto-columns : Mode de calcul des colonnes 'auto' dans une grille.
  • grid-auto-flow : Mode de calcul de l'emplacement des éléments dans la grille.
  • grid-auto-rows : Mode de calcul de la hauteur 'auto' des lignes dans une grille.
  • grid-column : Numéro de colonne(s) d'un élément dans une grille.
  • grid-column-end : Numéro de la colonne de fin d'un élément dans une grille.
  • grid-column-gap : Ajuste l'espacement des colonnes dans une grille.
  • grid-column-start : Numéro de la colonne de début d'un élément dans une grille.
  • grid-gap : Ajuste l'espacement des lignes et des colonnes dans une grille.
  • grid-row : Numéro des lignes d'un élément dans une grille.
  • grid-row-end : Numéro de la ligne de fin d'un élément dans une grille.
  • grid-row-gap : Ajuste l'espacement des lignes dans une grille.
  • grid-row-start : Numéro de la ligne de départ d'un élément dans une grille.
  • grid-template : Largeur des colonnes et hauteur des lignes d'une grille.
  • grid-template-areas : Définition de zones nommées dans une grille
  • grid-template-columns : Définition du nombre et de la largeur des colonnes d'une grille.
  • grid-template-rows : Définition du nombre et de la hauteur des lignes d'une grille.
  • justify-content : Définit le positionnement horizontal dans un flex-box ou une grille.
  • justify-items : Gère l'alignement horizontal des éléments dans le container flex-box ou grille.
  • justify-self : Définit le positionnement horizontal d'un élément particulier dans un flex-box ou une grille.

Grilles - Fonctions.

  • minmax() : Renvoie une valeur comprise dans une fourchette.
  • repeat() : Répète une valeur un certain nombre de fois.