box-lines

Non standard

Cette fonctionnalité n'est ni standard, ni en voie de standardisation. Ne l'utilisez pas pour des sites accessibles sur le Web : elle ne fonctionnera pas pour tout utilisateur. Il peut également y avoir d'importantes incompatibilités entre les implémentations et son comportement peut être modifié dans le futur.

Attention ! Cette propri√©t√© fait partie de la premi√®re version du standard pour les bo√ģtes flexibles (flexbox) et sera remplac√©e dans une prochaine version.

Voir la page Flexbox pour plus d'informations.

La propri√©t√© box-lines d√©termine si la bo√ģte se compose d'une ou plusieurs rang√©es (des lignes pour les bo√ģtes orient√©es horizontalement et des colonnes pour les bo√ģtes orient√©es verticalement). Pour plus de d√©tails, se r√©f√©rer √† la page Flexbox qui d√©crit les diff√©rentes propri√©t√©s des bo√ģtes flexibles.

/* Valeurs avec un mot-clé */
box-lines: single;
box-lines: multiple;

/* Valeurs globales */
box-lines: inherit;
box-lines: initial;
box-lines: unset;

Par d√©faut, une bo√ģte horizontale organisera ses √©l√©ments sur une seule ligne et une bo√ģte verticale les organisera sur une seule colonne. On peut modifier ce comportement en utilisant box-lines. La valeur par d√©faut est single (ce qui correspond au cas expliqu√© avant) et les √©l√©ments qui ne peuvent √™tre contenus dans cette ligne ou cette colonne d√©passeront.

Si, au contraire, on utilise la valeur multiple, la bo√ģte pourra s'√©tendre sur plusieurs rang√©es (des lignes ou des colonnes) afin de contenir ses diff√©rents √©l√©ments fils. La bo√ģte utilisera alors le moins de lignes ou de colonnes possibles et r√©duira les √©l√©ments √† leur taille minimale si n√©cessaire.

Si les √©l√©ments fils d'une bo√ģte horizontale ne rentrent pas dans une ligne apr√®s avoir √©t√© r√©duits √† leur taille minimale, ils sont d√©plac√©s sur une nouvelle ligne jusqu'√† ce que rien ne d√©passe de la ligne pr√©c√©dente. Le proc√©d√© est r√©p√©t√© autant de fois que n√©cessaire. Si une ligne contient un seul √©l√©ment et que celui-ci est trop grand, ce dernier restera sur cette ligne et d√©passera en dehors de la bo√ģte. Les nouvelles lignes sont cr√©√©es en dessous des premi√®res lorsque la direction de la bo√ģte est normal, dans le sens inverse (reverse) elles seront empil√©es les unes au dessus des autres. La hauteur d'une ligne sera √©gale √† la plus grande hauteur des √©l√©ments port√©s sur cette ligne. Aucun espace ne sera ajout√© entre les lignes en dehors des marges d√©crites par les plus grands √©l√©ments. Lors du calcul de la hauteur, les √©l√©ments avec une marge dont la valeur calcul√©e est auto seront trait√©s comme si la marge √©tait nulle (0).

On aura un fonctionnement analogue avec une disposition verticale.

Une fois que le nombre de rangées a été calculé, les éléments pour lesquels box-flex a une valeur calculée différentes de 0 seront étirés afin de remplir les espaces restants sur les lignes. Ces étirements sont calculés de façon indépendante selon chaque ligne (notamment pour box-flex et box-flex-group). Il en va de même pour le regroupement des éléments sur une ligne avec la propriété box-pack.

Syntaxe

Cette propri√©t√© est d√©finie gr√Ęce √† l'un des mots-cl√©s suivants.

Valeurs

single
Les √©l√©ments d'une bo√ģte sont dispos√©s sur une seule ligne ou sur une seule colonne.
multiple
Les √©l√©ments de la bo√ģte sont dispos√©s sur plusieurs lignes ou colonnes si n√©cessaire.

Syntaxe formelle

single | multiple

Spécifications

Valeur initialesingle
Applicabilit√©√©l√©ments de bo√ģte
Héritéenon
Valeur calculéecomme spécifié
Type d'animationdiscrète

Compatibilité des navigateurs

BCD tables only load in the browser

Voir aussi