Disposition de la boîte flexible CSS - CSS Flexible Box Layout

Flexbox
Disposition de la boîte flexible CSS
Nom natif
Disposition de la boîte flexible CSS
Statut Recommandation candidate (CR)
Année commencée 23 juillet 2009  ( 23/07/2009 )
Dernière version Niveau 1
9 novembre 2018  ( 09/11/2018 )
Aperçu de la version Ébauche de travail
25 mars 2021  ( 25/03/2021 )
Organisation
Comité Groupe de travail CSS
Rédacteurs
Normes de base CSS
Abréviation Flexbox
Site Internet www .w3 .org / TR / css-flexbox-1 /

CSS Flexible Box Layout , communément appelé Flexbox , est un modèle de mise en page Web CSS 3 . Il en est au stade de la recommandation de candidat (CR) du W3C . L'agencement flexible permet sensibles éléments à l' intérieur d' un conteneur pour être disposés automatiquement en fonction de la taille de l' écran (ou dispositif).

Concepts

La plupart des pages Web sont écrites dans une combinaison de HTML (Hypertext Markup Language) et CSS (Cascading Style Sheets). En bref, HTML spécifie le contenu et la structure logique de la page , tandis que le CSS spécifie son apparence : ses couleurs, ses polices, sa mise en forme, sa mise en page et son style.

La mise en page CSS flex-box est une manière particulière de spécifier la mise en page des pages HTML.

L'une des caractéristiques les plus déterminantes de la mise en page flexible est sa capacité à s'adapter, en fonction de son environnement de visualisation. Les boîtes flexibles peuvent s'ajuster en taille, soit en diminuant, pour éviter de monopoliser inutilement l'espace, soit en augmentant pour faire de la place pour que le contenu soit contraint à l'intérieur de ses limites. De plus, la mise en page flexible est moins restrictive en termes de flux de contenu que celles, par exemple, des types d'affichage bloc et en ligne, qui sont généralement unidirectionnelles. Le flux directionnel de flexion peut être spécifié comme vers la droite, vers la gauche, vers le haut ou vers le bas. Les éléments individuels dans un conteneur flexible peuvent également être automatiquement réorganisés et réorganisés pour s'adapter à l'espace de disposition disponible.

Histoire

Dans les années 2000, l'utilisation intensive du Web par les agents mobiles a motivé des «mises en page liquides» et des éléments réactifs pour la variété croissante des tailles d'écran. Dans les années 2010, l'utilisation intensive de frameworks de mise en page JavaScript populaires, tels que Bootstrap , a inspiré les spécifications de mise en page de la boîte flexible CSS et de la grille.

Les modules CSS 3 incluaient des solutions similaires, comme flexbox et grid .

En septembre 2020, 98,69% des navigateurs installés (99,29% des navigateurs de bureau et 100% des navigateurs mobiles) prennent en charge CSS Flexible Box Layout.

Terminologie

Les termes suivants sont associés au modèle de disposition de la flexbox.

Conteneur flexible
Élément parent qui contient tous les éléments flexibles. En utilisant la propriété d'affichage CSS, le conteneur peut être défini comme flex ou inline-flex.
Élément flexible
Tout élément enfant direct contenu dans le conteneur flex est considéré comme un élément flex. Tout texte dans l'élément conteneur est enveloppé dans un élément flexible inconnu.
Haches
Chaque boîte flexible contient deux axes: l'axe principal et l'axe transversal. L' axe principal est l'axe sur lequel les éléments s'alignent les uns avec les autres. L' axe transversal est perpendiculaire à l'axe principal.
Flex-direction
Établit l'axe principal. Arguments possibles: ligne (par défaut), ligne inversée, colonne, colonne inversée.
Justifier le contenu
Détermine comment le contenu est placé sur l'axe principal sur la ligne actuelle. Arguments facultatifs: gauche, droite, centre, espace entre, espace autour.
Aligner les éléments
Détermine la valeur par défaut de la façon dont les éléments flexibles sont placés sur l'axe transversal de chaque ligne.
Aligner le contenu
Détermine la valeur par défaut de l'alignement des lignes de l'axe transversal.
Alignez-vous
Détermine comment un élément unique est placé le long de l'axe transversal. Cela remplace toutes les valeurs par défaut définies par align-items.

les directions

départ croisé
extrémité croisée
Les côtés de départ / extrémité croisés déterminent où les lignes flexibles sont remplies d'éléments flexibles du début croisé à l'extrémité croisée.
démarrage principal
extrémité principale
Les côtés de début principal / extrémité principale déterminent où commencer à placer les éléments flexibles dans le conteneur flexible, en commençant par l'extrémité de début principal et en allant jusqu'à l'extrémité principale.
Ordre
Place les éléments dans des groupes et détermine dans quel ordre ils doivent être placés dans le conteneur.
Flex-flow
Shorthands flex-direction et flex-wrap pour placer le contenu flex.

Lignes

Lignes
Les éléments flexibles peuvent être placés sur une seule ligne ou sur plusieurs lignes, comme défini par la propriété flex-wrap, qui contrôle à la fois la direction de l'axe transversal et la façon dont les lignes s'empilent dans le conteneur.

Dimensions

Taille principale
Taille croisée
La taille principale et la taille transversale sont la hauteur et la largeur du conteneur flexible, chacune traitant respectivement des axes principal et transversal.

Usage

La désignation d'un élément en tant qu'élément flex nécessite de définir la propriété d'affichage CSS de l'élément sur flex ou inline-flex, comme suit:

display: flex;

Ou alors:

display: inline-flex;

En définissant l'affichage sur l'une des deux valeurs ci-dessus, un élément devient un conteneur flex et ses enfants flex éléments. La définition de l'affichage sur flex fait du conteneur un élément de niveau bloc , tandis que la définition de l'affichage sur inline-flex fait du conteneur un élément de niveau en ligne .

Aligner au centre

L'un des avantages de flexbox est la possibilité d'aligner facilement les éléments du conteneur au centre d'une page, à la fois verticalement et horizontalement.

display: flex;
align-items: center;
justify-content: center;

Les références