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-content

align-content est une propriété CSS, qui gère l'alignement du contenu dans un container flexible ou dans une grille. Cet alignement se fait de façon 'intelligente' en prenant en compte la direction et le sens d'écriture de la langue utilisée.

Description.

align-content appliquée à un flex-box.

La propriété align-content gère la disposition des lignes dans un flex-box, suivant l'axe secondaire.
Rappel : l'axe principal et l'axe secondaire sont définis par la propriété CSS flex-direction. La plupart du temps l'axe secondaire sera l'axe vertical.

La propriété align-content n'agit que si les enfants sont disposés sur plusieurs lignes : la propriété flex-wrap du container doit donc être positionnée sur wrap ou à la rigueur sur wrap-reverse. Dans le cas contraire, l'alignement se fait avec la propriété align-items.

align-content appliquée à une grille.

La propriété align-content gère la disposition des lignes dans une grille, dans le cas où la hauteur cumulée de ces lignes est inférieur à la hauteur de la grille elle-même.

Syntaxes pour align-content

align-content appliquée à un flex-box.

  • align-content: stretch;

    Valeur par défaut. Les lignes sont étirées pour occuper toute la hauteur du flex-box.

  • align-content: center;

    Les lignes sont groupées au centre du container flex-box.

  • align-content: flex-start;

    Les lignes sont groupées au début du container flex-box. La notion de début dépend de la direction qui a été choisie pour le container. La plupart du temps cela correspondra au haut du flex-box.

  • align-content: flex-end;

    Les lignes sont groupées à la fin du container flex-box. La notion de fin dépend de la direction qui a été choisie pour le container. La plupart du temps cela correspondra au bas du flex-box.

  • align-content: space-between;

    Les espaces entre les lignes sont ajustés pour que les lignes se répartissent sur toute la hauteur du container flex-box.
    Si R est la hauteur restant à répartir et n le nombre de lignes, la largeur E de chacun des espaces sera calculé par la formule :
    E = R / (n-1)

  • align-content: space-around;

    Les espaces entre, avant et après les lignes sont ajustés pour répartir les lignes sur toute la hauteur du container flex-box.
    Mettons R la hauteur restant à répartir et n le nombre de lignes, on aura les calculs suivants :
    Espace au début et à la fin : E = R /2n
    Espace entre les lignes : E = R / n

  • align-content: space-evenly;

    Les espaces entre, avant et après les lignes sont ajustés pour répartir les lignes sur toute la hauteur du container flex-box. L'espace restantR est réparti également entre tous ces espaces :
    E = R / (n+1)

  • align-content: inherit | initial | unset;

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

Syntaxes pour align-content appliquée à une grille.

  • align-content: stretch;

    Valeur par défaut. Les lignes sont étirées pour occuper toute la hauteur de la grille.

  • align-content: center;

    Les lignes sont groupées au centre de la grille.

  • align-content: start;

    Les lignes sont groupées en haut de la grille.

  • align-content: end;

    Les lignes sont groupées en bas de la grille.

  • align-content: space-between;

    Les espaces entre les lignes (gap) sont ajustés pour que les lignes se répartissent sur toute la hauteur de la grille.
    E = R / (n-1)

  • align-content: space-around;

    Les espaces entre, avant et après les lignes sont ajustés pour que les lignes se répartissent sur toute la hauteur de la grille.
    Espace au début à la fin : E = R / 2n
    Espace entre les lignes : E = R / n
    R étant la hauteur restant à répartir et n le nombre de lignes.

  • align-content: space-evenly;

    Les espaces entre, avant et après les lignes sont ajustés de la même valeur pour que les lignes se répartissent sur toute la hauteur de la grille. Si R est l'espace restant à répartir et n le nombre de lignes :
    E = R / (n+1)

  • align-content: inherit | initial | unset;

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

Simulateur.

L'effet de la propriété align-content est fortement lié à la direction principale du container flex.


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

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

Voir aussi...

Flex-box - Propriétés.

  • align-items : Disposition verticale des éléments 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-items : Disposition verticale des éléments 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.