Flexbox – Propriétés des Éléments

Flexbox – Propriétés des Éléments

La Propriété ordre order

.item { 
  order: <integer>; 
}

Les éléments FlexBox sont, par défaut, affichés et disposés dans le même ordre qu’ils apparaissent dans le document source. La propriété ordre peut être utilisée pour modifier cet ordre. En effet, la propriété ordre order contrôle l’ordre dans lequel les éléments apparaissent dans leur conteneur, en les affectant à des groupes ordinaux. Ça ne demande qu’une seule valeur <integer>, qui spécifie à quel groupe ordinal appartient l’élément.

L’ordre initial de tous les éléments est zéro (0), ces éléments sont rendus dans l’ordre dans lequel ils apparaissent dans le code source. La propriété ordre order peut également prendre des valeurs négatives.

Notez que l’ordre dans lequel l’élément apparaît dans son conteneur ne change que sur l’écran et non dans le document source. Ce qui veut dire que les lecteurs d’écran lisent les éléments dans l’ordre selon lequel ils apparaissent dans le document source, et non selon l’ordre spécifié à l’aide de la propriété ordre order. L’ordre de décalage par défaut des modes de navigation séquentiels (tels que le cyclage à travers les liens, par exemple en utilisant nav-index ou tabindex) n’est pas affecté aussi ((Sauf dans Firefox, qui modifie l’ordre de traversée des liens basé sur l’ordre visuel). Ainsi, la propriété ordre order est utlisée uniquement pour le reordre visuel, non logique, du contenu.

Cette propriété pourrait être utile pour réorganiser les publications du blog, par exemple, où vous voudrez peut-être présenter une publication sur le blog au début de la page, même si cet article n’est plus le dernier. L’ordre logique accessible aux lecteurs d’écran sera maintenu et l’article peut être remplacé visuellement sans affecter l’accessibilité.

Essayez de modifier l’ordre des éléments dans le conteneur FlexBox suivant pour voir comment ils sont réorganisés visuellement.

La propriété auto-align align-self

.item { 
  align-self: auto | flex-start | flex-end | center | baseline | stretch; 
}

Les éléments peuvent être alignés dans l’axe-croisé cross axis de la ligne actuelle du conteneur , similaire au adapter-contenu justify-content mais dans la direction perpendiculaire. aligner-éléments align-items définit l’alignement par défaut pour tous les éléments du conteneur . La propriété auto-align align-self permet d’annuler l’alignement par défaut pour les éléments individuels. Afin de comprendre pleinement les valeurs et les concepts derrière cette propriété, consultez la description de la propriété aligner-éléments align-items. Les valeurs possibles ont les significations suivantes:

auto

C’est la valeur initiale. Une valeur de calcul automatique de la valeur aligner-éléments align-items dans le conteneur, ou étendu si l’élément n’a aucun parent. En d’autres termes, l’élément sera aligné en fonction de sa valeur par défaut ou de la valeur spécifiée pour la propriété aligner-éléments align-items.

début-flex (flex-start)

L’élément est emballé vers le début-croisé cross-start de la ligne

fin-début (flex-end)

L’élément est emballé vers la fin-croisée cross-end de la ligne.

centre (center)

La boîte de marge de l’élément est centrée à l’axe-croisé dans la ligne. (Si la taille-croisée cross-size de la ligne est inférieure à celle de l’élément, elle débordera également dans les deux sens.)

ligne-de-base (baseline)

Si l’axe-en-ligne inline-axis de l’élément est identique à l’axe-croisé cross-axis, cette valeur est identique à début-flex flex-start. Sinon, il participe à l’alignement de ligne-de-base baseline: tous les éléments participants sont alignés de telle sorte que leurs lignes-de-base baselines s’alignent et l’élément avec la plus grande distance entre sa ligne-de-base baseline et son bord de marge de début-croisé cross-start est placé à la hauteur du début-croisé cross-start de la ligne.

étendu (stretch)

L’élément est étendu du début-croisé cross-start vers la fin-croisée cross-end tout en respectant les limites imposées par hauteur-minimale min-height / largeur minimale almin-width / hauteur-maximale max-height / largeur-maximale max-width. Notez que si la hauteur du conteneur est limitée, cela peut provoquer le débordement du contenu de l’élément.

Dans le démo suivant, les éléments sont alignés à l’intérieur du conteneur FlexBox en utilisant la propriété aligner-éléments align-items avec une valeur de centre center.
Toute valeur appliquée au 3ème élément (avec le numéro 3) en utilisant la propriété aligner-auto align-self remplacera celle appliquée en utilisant la propriété aligner-éléments align-items.

La propriété grandir-flex flex-grow

.item { 
  flex-grow: <number>; /* default 0 */ 
}

La propriété grandir-flex flex-grow définit le facteur de croissance flexible d’un élément. Un facteur de croissance flexible est un <nombre> qui détermine combien l’élément flexible augmentera par rapport au reste des éléments dans le conteneur flexible lorsque l’espace libre positif est distribué. La valeur initiale est zéro (0) et les nombres négatifs sont invalides.

Si les éléments flexibles sont disposés sur la ligne flexible de sorte qu’ils ne prennent pas l’espace entier sur cette ligne, vous pouvez “étendre” les éléments flex pour qu’ils remplissent toute la ligne.

Par exemple, vous pouvez distribuer l’espace entre les éléments flexibles de sorte que l’un de ces éléments reçoit toujours deux fois plus d’espace que les autres. Vous pouvez le faire en définissant la valeur de la propriété Flex-Grow à 2 (deux). Un élément avec flex-grow: 2 augmentera deux fois plus qu’un élément avec flex-grow: 1 (il obtient deux fois plus d’espace que celui-ci). Ainsi, pour chaque pixel que le second élément obtient, le premier élément augmente de deux pixels.

Essayez d’entrer différentes valeurs pour la propriété Flex-Grow dans la démo suivante pour voir comment les éléments augmentent.

Notez que la propriété Flex-Grow est animable, sauf entre la valeur zéro (0) et les autres valeurs.

La propriété grandir-flex flex-grow est habituellement utilisée conjointement avec les propriétés rétrécir-flex flex-shrink et base-flex flex-based, dans la propriété raccourcie flex

La propriété flex-rétractable flex-shrink

.item { 
flex-shrink: <number>; /* default 1 */ 
}

La propriété  flex-shrink (flex-rétractable)  définit le facteur de contraction d’un élément flexible. Le facteur de contraction flexible est un <nombre> qui détérmine combien l’élément flexible va diminuer par rapport au reste des éléments flex Dans le conteneur flexible lorsque l’espace libre négatif est (distribué. Le facteur de réduction du flex est multiplié par flex basis (voir flex-basis) lors de la distribution de l’espace négatif. La valeur initiale est nulle (1), ce qui signifie que les éléments ne se réduisent pas par défaut et les nombres négatifs sont invalides.

Si la somme des tailles principales main sizes (voir section Concepts & Terminologie dans l’article FlexBox – Notions de base) de tous les éléments flexibles est supérieur à la taille principale du conteneur flexible, Vous pouvez spécifier simplement de combien est ce que vous souhaiteriez “rétrécir” les éléments flexibles. Le montant par lequel la taille principale main-size des éléments flexibles dépasse la taille principale du conteneur, représente l’espace négatif. En utilisant la propriété flex-shrink, Vous pouvez répartir cet espace négatif sur les éléments flexibles. L’espace négatif est réparti proportionnellement à flex-basis (flex-base) multipliée par le ratio flex-shrink , où flex-basis est la taille principale main-size initiale de l’élément flexible, avant que l’espace libre ne soit distribué selon les facteurs flexibles.

Par exemple, vous pouvez répartir l’espace entre les éléments flexibles de sorte que l’un de ces éléments reçoit toujours deux fois plus d’espace négatif que les autres. Vous pouvez le faire en définissant la valeur de la propriété de flex-shrink à 2 (deux). Un élément avec flex-shrink: 2 rétrécira deux fois plus qu’un élément avec flex-shrink: 1 (il obtient deux fois plus d’espace négatif que celui-ci). Donc, pour chaque pixel que le second élément rétrécit, le premier élément rétrécit de deux pixels. Plus la valeur flex-shrink augmente, plus l’élément diminue par rapport aux autres éléments.

Les éléments de la démo suivante sont posés dans un conteneur qui a une taille main-size principale de 500px. Chacun des quatre éléments a une taille principale main-size (ou une base flexible flex-basis) de 200px. Les éléments (combinés) ont évidemment une taille principale plus grande que celle du conteneur. Étant donné qu’il s’agit d’une disposition FlexBox, les éléments se réduisent automatiquement pour s’adapter à leur conteneur. Cependant, à l’aide de la propriété de réduction de la flexibilité flex-shrink, vous pouvez contrôler le rapport par lequel les éléments doivent être rétrécis. Essayez d’entrer différentes valeurs pour la propriété flex-shrink dans la démo suivante pour voir comment les éléments se réduisent.

Notez que la propriété de flex-shrink est animable, sauf entre la valeur zéro (0) et les autres valeurs.

La propriété flex-shrink est habituellement utilisée en conjonction avec les propriétés flex-flexion et flex-grow dans la propriété raccourcie flex.

La Propriété base flexible flex-basis

.item { 
  flex-basis: <length> | auto; /* default auto */ 
}

La propriété de base-flexible flex-basis prend les mêmes valeurs que la propriété largeur width, et définit la base-flexible flex-basis: la taille-principale main-size initiale (voir section Concepts & Terminologie dans l’article FlexBox – Notions de base) de l’élément flexible avant que l’espace libre ne soit distribué selon les facteurs flexibles (Voir flex-shrink et flex-grow). 

Excepté pour auto, la base-flexible flex-basis est résolue de la même manière que la largeur dans les modes d’écriture horizontale: Les valeurs de pourcentage pour la propriété base-flexible flex-basis sont définies par rapport à la taille principale interne du conteneur flexible. En outre, flex-basis détermine la taille de la zone de contenu de l’élément, sauf indication contraire spécifiée en utilisant la propriété box-sizing (La propriété box-sizing sert à modifier la façon dont le dimensionnement d’un élément se produit par rapport à son “modèle de boîte”).

Si la base-flexible spécifiée est auto, la base-flexible utilisée est la valeur de la propriété taille-principale main-size de l’élément flexible. (Ceci peut être le mot-clé auto, qui taille l’élément flexible en fonction de son contenu.)

La propriété base-flexible flex-basis est habituellement utilisée conjointement avec les propriétés flex-shrink et flex-grow, dans la propriété raccourcie flex.

Dans la démo suivante, la base-flexible flex-basis est utilisée dans le raccourcie flex. Les propriétés flex-shrink et flex-grow sont définies de telle sorte que les éléments deviennent grands ou diminuent. La valeur spécifiée à l’aide de la base-flexible flex-basis définit la taille-principale main-size de chaque élément. Essayez de modifier les valeurs de toutes les trois propriétés dans le raccourcie flex pour voir comment la largeur des éléments répond. Par exemple, essayez d’utiliser une valeur différente de flex-grow pour voir comment la taille d’un élément change après que l’espace positif soit distribué.

La propriété Flex

.item { 
  flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ] 
}                

La propriété Flex est une propriété raccourcie pour définir les propriétés flex-grow, flex-shrink et flex-basis.

Lorsqu’un élément est un élément flexible, Flex est utilisé à la place de la propriété taille-principale main-size (propriétés de largeur ou de hauteur, voir section Concepts & Terminologie dans l’article FlexBox – Notions de base) pour déterminer la taille-principale main-size de l’élément. Si un élément n’est pas un élément flexible, Flex n’a aucun effet.

La valeur initiale est 0 1 automatique. Les propriétés flex-grow et flex-shrink sont facultatives et peuvent être omises de la déclaration de flex.

Lorsque la valeur de flex-grow est omise, il est réglé sur 1. Notez que 1 n’est pas la valeur initiale de la propriété flex-grow! Ce n’est que la valeur utilisée lorsque flex-grow est omise de la déclaration raccourcie.

Lorsque la propriété flex-shrink est omise, elle est réglée sur 1. Notez que le facteur de contraction du flex est multiplié par la flexibilité lors de la distribution de l’espace négatif. (Voir la propriété flex-shrink).

Lorsque la valeur de base-flexible flex-basis est omise, elle est réglée sur 0%.

Les valeurs initiales des propriétés flex-grow et flex-shrink sont différentes de leurs valeurs par défaut lorsqu’elles sont omise dans le raccourci flex. Ceci pour que le raccourci flex peut mieux s’adapter aux cas les plus courants.

Voici quelques-unes des valeurs flexibles communes et leurs significations:

flex: 0 auto / flex: initial

Cela équivaut à flex: 0 1 auto, qui est la valeur initiale. Cette valeur mesure l’élément en fonction des propriétés largeur/hauteur. (Si la propriété de la taille-principale main-size de l’élément se calcule automatiquement, cela réduira l’élément flexible en fonction de son contenu.) Rend l’élément flexible inflexible lorsqu’il existe un espace libre positif, mais lui permet de réduire sa taille minimum quand il n’y a pas suffisamment d’espace.

flex: auto

Cela équivaut à flex: 1 1 auto. Cette valeur mesure l’élément en fonction des propriétés de largeur/hauteur, mais les rend totalement flexibles, de sorte qu’ils absorbent tout espace libre le long de l’axe-principal main-axsis. Si tous les éléments sont soit: auto, flex: initial ou flex: none, tout espace libre positif après que les éléments aient été dimensionnés sera distribué d’une façon égale aux éléments avec flex: auto.

flex: none

Cela équivaut à flex: 0 0 auto. Cette valeur mesure l’élément selon les propriétés de largeur/hauteur, mais rend l’élément flexible complètement inflexible. Ceci est similaire à l’initial, sauf que les éléments flexibles ne sont pas autorisés à diminuer, même dans des situations de débordement.

flex: <positive-number>

Cette valeur équivaut à flex: <positive-number> 1 0%. Cette valeur rend l’élément flex flexible, et définit la base-flexible flex-basis à zéro, résultant en un élément qui reçoit la proportion spécifiée de l’espace libre dans le conteneur flexible. Si tous les éléments du conteneur flexible utilisent ce modèle, leurs tailles seront proportionnelles au facteur de flexibilité spécifié.

Notez que, par défaut, les éléments flexibles ne diminuent pas en dessous de leur Taille minimale du contenu (la longueur du mot le plus long ou de l’élément de taille fixe). Pour modifier cela, définissez la propriété min-width largeur-minimale ou min-height hauteur-minimale .

Modifiez la valeur de la propriété flex dans la démo suivante pour voir comment elle affecte les éléments flexibles. Vous pouvez également utiliser une valeur différente pour chaque élément. La démo est définie de telle sorte que les éléments ont une base flexible de 100px, et ne se réduisent ni ne se développent. Jouez avec les valeurs à votre goût pour mieux comprendre comment la propriété fonctionne avec différentes valeurs.