FlexBox – Propriétés du Conteneur

Propriétés du Conteneur Flexbox

La propriété direction-flex (flex-direction)

flex-direction: row | row-reverse | column | column-reverse

La propriété direction-flex (flex-direction) spécifie comment les éléments sont placés dans le conteneur, en définissant la direction de l’axe-principal (main-axis) du conteneur. Cela détermine la direction dans laquelle les éléments sont disposés. La direction des axes est affectée par le mode d’écriture et la directionnalité du texte. Les valeurs possibles ont les significations suivantes:

Ligne (row)

C’est la valeur initiale. L’axe-principal (main-axis) du conteneur a la même orientation que le mode d’écriture actuel. Le début-principal (main-start) est à gauche dans une langue de gauche à droite, et la fin-principale (main-end) est à droite. Dans une langue de droite à gauche, le début-principal (main-start) est à droite et la fin-principale (main-end) est sur la gauche.

Ligne inversée (row-reverse)

Identique à la ligne, sauf que les directions début-principal (main-start) et  fin-principale (main-end) sont inversées. L’axe-principal (main-axis)  du conteneur suit l’orientation opposée du mode d’écriture en cours.

colonne (column)

L’axe-principal (main-axis) du conteneur est tourné de sorte que le début-principal (main-start) soit en haut et la fin-principale (main-end) soit en bas. Essentiellement, les éléments sont placés verticalement de haut en bas dans une langue horizontale. Si la langue est verticale, la valeur de la colonne sera horizontale par rapport à la langue.

colonne inversée (column-reverse)

Identique à la colonne sauf que les directions du début-principal (main-axis) et de la fin-principale (main-end) soient échangées.

Notez bien que les valeurs inversées ne changent en aucuns cas l’ordre des blocs, comme le mode d’écriture et les directions, ils ne changent que les directins du flux. L’ordre du texte, des images, du contenu audio vidéo ainsi que celui de la navigation séquentielle ne sont pas affectés.

La démo suivante illustre le résultat de l’application des quatres valeurs de direction-flex (flex-direction) au conteneur.

Là dessous le même démo avec le mode d’écriture différent de droite à gauche. Voyez comment cela affecte la direction de l’axe-principal (main-axis) et donc la direction dans laquelle les éléments sont présentés.

Il convient de noter à ce stade qu’un conteneur a initialement une seule ligne où les éléments sont posés, même si cela signifie qu’ils débordent le conteneur. Pour que les éléments se déroulent et s’étendent sur plusieurs lignes, la propriété envelopper-flex (flex-wrap) est utilisée (voir la section suivante).

La propriété envelopper-flex (Flex-Wrap)

flex-wrap: nowrap | wrap | wrap-reverse

La propriété envelopper-flex (Flex-Wrap) contrôle si le conteneur est en une seule ligne ou en ligne multiple et controle aussi la direction de l’axe-croisé (cross-axis), ce qui détérmine la direction dans laquelle les nouvelles lignes sont empilées. Les valeurs possibles ont les significations suivantes:

sans-enveloppe (nowrap)

C’est la valeur iniale. Le conteneur est en une seule ligne, et tous les éléments sont disposés sur cette ligne, même si cela signifie qu’ils peuvent déborder du conteneur. La direction de la ligne dépend de la directionnalité du texte (voir la direction fléchée à l’image dessus).

enveloppe (wrap) 

S’il n’y a pas assez de place pour la première ligne, les éléments s’emballent sur des lignes supplémentaires . Des lignes supplémentaires sont ajoutées dans la direction de l’axe-croisé (cross-axis), qui est affectée par la directionnalité du texte (voir la direction fléchée à l’image dessus).

enveloppe-inversée (wrap-reverse)
Identique à wrap, sauf que les directions début-croisé (cross-start) et fin-croisée (cross-end) sont inversées Cela signifie que des lignes supplémentaires sont ajoutées dans la direction opposée de l’axe-croisé (cross axis).

La démonstration suivante illustre le résultat de l’application des quatre valeurs flex-wrap au conteneur. Notez que les autres propriétés de Flexbox sont toutes définies sur leurs valeurs par défaut.

Les éléments-tenteront tous d’intégrer une ligne, comme vous pouvez le voir dans le démo dessus. À l’aide de différentes valeurs de flex-wrap, vous pouvez changer cela et les faire passer à travers plusieurs lignes.

La propriété flux-flex (Flex-flow)

flex-flow: <'flex-direction'> <'flex-wrap'>

La propriété  flux-flex (flex-flow) est un raccourci pour définir les propriétés flex-direction et flex-wrap, qui définissent ensemble les axes-principaux (main-axis) et les axes-croisés (cross-axis) du conteneur.
La valeur initiale de la propriété flux-flex est la concaténation des valeurs initiales des propriétés flex-direction et flex-wrap:

flex-flow: row nowrap;

Les exemples suivants montrent le résultat de l’application de différentes valeurs de flex-flow au conteneur. Les exemples montrent le résultat de l’application des valeurs de ligne et de colonne de la propriété flex-direction avec les différentes valeurs de la propriété flex-wrap. Essayez de modifier les valeurs de la propriété flex-flow pour inclure les valeurs row-reverse et column-reverse de la propriété direction-flex (flex-direction) pour voir comment cela va modifier la mise en page.

Notez que les directions des flux-flex (flex-flow) sont sensibles au mode d’écriture. Dans le japonais vertical, par exemple, le conteneur de la ligne flex (flex-row) présente son contenu du haut en bas, comme on le voit dans cet exemple:

La propriété adapter-contenu (justify-content)

justify-content: flex-start | flex-end | center | space-between | space-around

La propriété adapter-contenu (justify-content)t aligne les éléments e long de l’axe-principal (main-axis) de la ligne courante du conteneur. Cela se fait après que des longueurs et des marges automatiques soient résolues. En règle générale, elle permet de distribuer les surplus d’espace libres lorsque tous les éléments sur une ligne sont inflexibles ou flexibles mais qu’ils ont atteint leur taille maximale. elle exerce également un certain contrôle sur l’alignement des éléments lorsqu’ils dépassent la ligne. Les valeurs possibles ont les significations suivantes:

début-flex (flex-start)

C’est la valeur initiale. Les éléments sont emballés vers le début de la ligne.

fin-flex (flex-end)

Les éléments sont emballés vers la fin de la ligne.

centre (center)

Les éléments sont emballés vers le centre de la ligne, avec des quantités égales d’espace libre entre le bord du début-principal (main-start) de la ligne et le premier élément sur la ligne et entre le bord de fin-principal (main-end) de la ligne et le dernier élément sur la ligne . (Si l’espace libre restant est négatif, les éléments se transforment également dans les deux sens).

espace-entre (space-between)

Les éléments sont distribués de façon égale dans la ligne. Si l’espace libre restant est négatif ou s’il n’y a qu’un seul élément-sur la ligne, cette valeur est identique à début-flex (flex-start). Sinon, le premier élément de la ligne est placé sur le bord du début-principal (main-start) de la ligne, le dernier élément sur la ligne se trouve sur le bord de la ligne-principale (main-row)  et les éléments restants sur la ligne sont distribués de sorte que l’espace entre deux objets adjacents soit le même.

espace-autour (space-around)

Les éléments sont répartis de façon égale dans la ligne, avec des espaces demi-taille à chaque extrémité. Si l’espace libre restant est négatif ou qu’il n’y a qu’un seul élément sur la ligne, cette valeur est identique au centre. Sinon, les éléments sur la ligne sont répartis de sorte que l’espace entre deux éléments adjacents sur la ligne soit identique et l’espace entre les premiers/derniers éléments et les bords du conteneur soit la moitié de la taille de l’espace entre les éléments.

La démonstration suivante montre le résultat de l’application des différentes valeurs de adapter-content (justify-content) au conteneur. Les autres propriétés de Flexbox sont définies sur leurs valeurs par défaut.

La propriété aligner-éléments (align-items)

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

La propriété aligner-éléments (align-items) est similaire à la propriété adapter-contenu (justify-content), mais au lieu d’aligner les éléments dans l’axe-principal (main-axis), la propriété aligner-éléments (align-items) est utilisée pour aligner les éléments dans l’axe-croisé (cross-axis) qui est l’axe perpendiculaire à l’axe-principal (main-axis). Les valeurs possibles ont les significations suivantes:

début-flex (flex-start)

Les éléments sont emballés vers le démarrage de la ligne.

fin-flex (flex-end)

Les éléments sont emballés vers la fin croisée (cross-end) de la ligne.

centre (center)

Les éléments sont emballés vers le centre de la ligne, Avec des quantités d’espace libre égales entre le bord de la fin-croisée (cross-end) de la ligne et entre le premier élément sur la ligne et le bord de la fin-croisée  (cross-end) de la ligne et le dernier article sur la ligne. (Si l’espace libre restant est négatif, les éléments débordent en quantités égales dans les deux sens.)

ligne-base (baseline)

Les éléments sont alignés de la même façon que leurs lignes-base (baseline) s’alignent. L’élément avec la plus grande distance entre le bord marginal du début-croisé (cross-start) est rincé avec le bord de début croisé (cross-start) de la ligne.

étendu (stretch)

C’est la valeur initiale. Les éléments sont étirés du début-croisé (cross-start) vers la fin-croiée (cross-end), tout en respectant les limitations imposées par min-height/min-width/max-height/max-width. Notez que si la hauteur du conteneur est limitée, cette valeur peut causer le débordement du contenu.

La démonstration suivante montre le résultat de l’application des différentes valeurs de la propriété aligner-éléments (align-items) au conteneur. Les autres propriétés de FlexBox sont définies sur leurs valeurs par défaut.

Lorsque la valeur de la propriété aligner-éléments (align-items) est la ligne-base (baseline), notez comment la ligne-base (baseline) des nombres dans les éléments est alignée (une ligne rose apparaît).

Notez que la propriété aligner-auto (self-align) permet à l’alignement spécifié par aligner-éléments (align-items) d’être surpassé pour les éléments individuels.

La propriété aligner-contenu align-content

align-content: flex-start | flex-end | center | space-between | space-around | stretch

La propriété aligner-contenu (align-content) aligne les lignes dans le conteneur lorsqu’il existe un espace supplémentaire dans l’axe-croisé (cross-axis), Semblable à la façon dont adapter-contenu (justify-contenu) aligne les éléments individuels dans l’axe-principal (main-axis). Cette propriété n’a aucun effet lorsque le conteneur n’a qu’une seule ligne. Les valeurs possibles ont les significations suivantes:

Les lignes sont emballées vers le début du conteneur.

fin-flex (flex-end)

Les lignes sont emballées vers la fin-croisée (cross-end) du conteneur.

Centre (center)

Les lignes sont emballées vers le centre du conteneur, avec des quantités égales d’espace vide entre le bord du début-croisé (cross-start)du conteneur et la première ligne dans le conteneur et entre le bord de fin-croisée (cross-end) du conteneur et la dernière ligne dans le conteneur (Si l’espace libre restant est négatif, les lignes déborderont également dans les deux sens.)

espace-entre (space-between)

Les lignes sont réparties de façon égale dans le conteneur. Si l’espace libre restant est négatif, cette valeur est identique au début-flex (flex-start). Sinon, le bord de début-croisé (cross-start ) de la première ligne dans le conteneur est placé sur le bord de début-croisé (cross-start) du conteneur, Le bord de fin-croisé (cross-end) de la dernière ligne dans le conteneur est placé sur le bord de contenu de la fin-croisée (cross-end) du conteneur et les lignes restantes sont réparties de sorte que l’espacement entre deux lignes adjacentes soit identique.

espace autour (space-around)

Les lignes sont réparties de façon égale dans le conteneur, Avec des espaces demi-taille à chaque extrémité. Si l’espace libre restant est négatif, cette valeur est identique au centre.Sinon, les lignes dans le conteneur sont distribuées de sorte que l’espacement entre deux lignes adjacentes soit identique, et l’espacement entre la première/dernière ligne et les bords du conteneur est la moitié de la taille de l’espacement entre les lignes.

étendue (stretch)

C’est la valeur initiale. Les lignes s’étendent pour prendre l’espace restant. Si l’espace libre restant est négatif, cette valeur est identique à début-flex (flex-start). Sinon, l’espace libre est réparti séparément entre toutes les lignes, augmentant leur taille-croisée (cross-size). 

Notez que seuls les conteneurs FlexBox avec plusieurs lignes ont toujours de l’espace libre dans les axes-croisés (cross-axis) pour les lignes à aligner, Parce que dans un conteneur à une seule ligne, La ligne unique s’étend automatiquement pour remplir l’espace (C’est le comportement par défaut).

La démonstration suivante montre le résultat de l’application des différentes valeurs de la propriété alignement-contenu (align-content) au conteneur. Toutes les propriétés FlexBox sont définies sur leurs valeurs par défaut, excepté la propriété flex-wrap qui est configurée pour s’enrouler, ainsi les articles sont répartis sur plusieurs lignes, car, comme mentionné ci-dessus, la propriété aligner-contenu ne fonctionne que sur un conteneur FlexBox multi-lignes.