Disposition de la boîte flexible CSS - CSS Flexible Box Layout
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 |
Dernière version | Niveau 1 9 novembre 2018 |
Aperçu de la version | Ébauche de travail 25 mars 2021 |
Organisation | |
Comité | Groupe de travail CSS |
Rédacteurs | |
Normes de base | CSS |
Abréviation | Flexbox |
Site Internet | www |
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).
Feuilles de style en cascade |
---|
Concepts |
Philosophies |
Outils |
Comparaisons |
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;