align-items CSS propriété

Définition de la CSS align-items.

La propriété d'alignement CSS align-items permet de spécifier globalement l'alignement "vertical" des éléments flexibles ou grille Css par rapport à la hauteur de ligne (ou de largeur de la colonne) d'un conteneur Flexbox Css ou Grid Css.

Sens de l'alignement align-items Dans un conteneur Flexbox Css, l'alignement se fait par rapport à l'axe transversal.
Dans un conteneur Grid Css, l'alignement se fait verticalement par rapport à la hauteur de la ligne.

Pour redéfinir l'alignement d'un seul élément flexible ou grille Css par rapport aux autres, utilisez la propriété Css align-self.

Vous pouvez faire des tests de paramétrage dans le générateur de code Css de Flexbox.

Exemple de syntaxe CSS align-items :

align-items : flex-start;
align-items : flex-end; 
align-items : center;
align-items : baseline;
align-items : stretch;

La propriété de feuille de style align-items CSS peut prendre la valeur de :

flex-start : le "coin de début" (margin incluses) de chaque élément flexible est collé sur le "début transversal de la ligne* de flexibles".
flex-end : le "coin de fin" (margin incluses) chaque élément flexible est collé sur sur la "fin transversal" de la ligne.
center : chaque élément flexible (margin incluses) est centré par rapport à "l'axe transversal" de la ligne* de flexibles.
baseline : chaque élément flexible s'aligne sur leur baseline afin de partager la même ligne de base (baseline) sur sa ligne. Si l'élément flexible n'a pas de ligne de base, alors elle est calculée en fonction par des bordures de l'élément flexible.
stretch : chaque élément flexible qui respecte les règles d'application est étiré afin que sa taille (margin incluses) prenne toute la hauteur de sa ligne* de flexibles tout en respectant les contraintes imposées par min-height, max-height et min-width , max-width. Valeur par défaut.
normal : identique à la valeur stretch, valeur par défaut. Je vous conseille faire un reset de cette valeur pour stretch en ce qui concerne les Flexbox Css.

*) ou colonne suivant la valeur de flex-direction.

Exemple de code align-items CSS

Conditions d'application de la CSS align-items.

La propriété de feuille de style align-items CSS est applicable sur l'ensemble des balises HTML ou XHTML, si elles sont le container Grid Css (display:[inline-]grid), Flex Css (display:[inline-]flex) ou Multi-Column Css (column[-*]).

Héritage des valeurs Css de align-items.

Les balises filles HTML ou XHTML directes héritent de la propriété de feuille de style align-items

Règles de syntaxes CSS pour align-items.

Qu'est ce qu'une ligne ou colonne de flexibles ?

Qu'est ce qu'une ligne de flexibles Les éléments flexibles sont regroupés dans un conteneur virtuel que l'on nommera ligne de flexibles ou colonne de flexibles. Lors d'un retour automatique, les éléments flexibles qui vont à la ligne ou à la colonne forment une nouvelle ligne de flexibles ou colonne de flexibles.

Règles d'application de la valeur stretch

L'effet de la valeur stretch est appliqué à l'élément flexible s'il respect la règle suivante.
Pour un conteneur Flexbox Css de type flex-direction:row :

height a une valeur auto ou non précisée.
margin-bottom ou margin-top n'a pas la valeur auto.

Pour un conteneur Flexbox Css de type flex-direction:colunm

width a une valeur auto ou non précisée.
margin-left ou margin-right n'a pas la valeur auto.

Compatibilités navigateurs de la propriété align-items

Détails des versions de la CSS align-items: Propriété align-items est compatible avec CSS3 et plus.

Résumé du support navigateurs de la CSS align-items: Propriété CSS align-items est compatible sous une forme préfixée avec Chrome 4; Propriété CSS align-items est compatible à partir de Chrome 29; Propriété CSS align-items est compatible sous une forme préfixée avec Firefox 2; Propriété CSS align-items est compatible à partir de Firefox 22; Propriété CSS align-items est compatible sous une forme préfixée avec Internet Explorer 10; Propriété CSS align-items est compatible à partir de Internet Explorer 11; Propriété CSS align-items est compatible à partir de Opera 12; Propriété CSS align-items est compatible sous une forme préfixée avec Safari 3; Propriété CSS align-items est compatible à partir de Safari 9

Propriétés CSS préfixées de align-items

Vous trouverez ci-dessous les propriétés CSS préfixées équivalentes à la propriété align-items CSS :

Pour rendre compatible la propriété align-items CSS avec le plus grand nombre de navigateurs, vous devez utiliser les versions préfixées suivante :

Versions préfixées de align-items :

-moz-box-align : stretch; /* baseline | center | end | start | stretch */
-ms-flex-align : stretch; /* baseline | center | end | start | stretch */
-webkit-box-align : stretch; /* baseline | center | end | start | stretch */
-webkit-align-items : stretch;
align-items : stretch;

Votre avis sur la définition align-items en CSS

Votez pour la définition CSS `align-items`

Votes: 4 / 5 - 4 votes
Cliquez sur une étoile pour voter.

Définitions annexes à la Css align-items

Définitions CSS annexes align-items

align-self: La propriété d'alignement CSS ALIGN-SELF permet de spécifier l'alignement d'un élément flexible ou grille Css spécifique par rapport à la hauteur de l...[ align-self ]
max-height: La propriété de Hauteur CSS MAX-HEIGHT permet de spécifier la hauteur maximale de la zone de contenu d'un élément (X)HTML dit de type block. Exemple d...[ max-height ]
max-width: La propriété de Longueur CSS MAX-WIDTH permet de spécifier la longueur maximale de la zone de contenu d'un élément (X)HTML dit de type block. Exemple ...[ max-width ]
min-height: La propriété de Hauteur CSS MIN-HEIGHT permet de spécifier la hauteur minimale de la zone de contenu d'un élément (X)HTML dit de type block. Exemple d...[ min-height ]
min-width: La propriété de Longueur CSS MIN-WIDTH permet de spécifier la longueur minimale de la zone de contenu d'un élément (X)HTML dit de type block. Exemple ...[ min-width ]