Flexbox, également appelé Flexible Box Module, est l'un des deux systèmes de mise en page modernes, avec CSS Grid
- introduction
- Prise en charge du navigateur
- Activer Flexbox
- Propriétés du conteneur
- Propriétés qui s'appliquent à chaque élément
introduction
Flexbox, également appelé Flexible Box Module, est l'un des deux systèmes de mise en page modernes, avec CSS Grid.
Comparé à CSS Grid (qui est bidimensionnel), flexbox est unmodèle de disposition unidimensionnel. Il contrôlera la mise en page en fonction d'une ligne ou d'une colonne, mais pas ensemble en même temps.
L'objectif principal de flexbox est de permettre aux éléments de remplir tout l'espace offert par leur conteneur, en fonction de certaines règles que vous définissez.
À moins que vous n'ayez besoin de prendre en charge d'anciens navigateurs comme IE8 et IE9, Flexbox est l'outil qui vous permet d'oublier d'utiliser
- Dispositions de table
- Flotteurs
- hacks clearfix
display: table
hacks
Plongeons-nous dans la flexbox et devenons-en un maître en très peu de temps.
Prise en charge du navigateur
Au moment de la rédaction de cet article (février 2018), il est pris en charge par 97,66% des utilisateurs, tous les navigateurs les plus importants l'implémentent depuis des années, donc même les navigateurs plus anciens (y compris IE10 +) sont couverts:
Alors que nous devons attendre quelques années pour que les utilisateurs rattrapent leur retard sur CSS Grid, Flexbox est une technologie plus ancienne et peut être utilisée dès maintenant.
Activer Flexbox
Une mise en page flexbox est appliquée à un conteneur, en définissant
display: flex;
ou
display: inline-flex;
le contenuà l'intérieur du conteneursera aligné à l'aide de flexbox.
Propriétés du conteneur
Certaines propriétés flexbox s'appliquent au conteneur, qui définit les règles générales pour ses éléments. Elles sont
flex-direction
justify-content
align-items
flex-wrap
flex-flow
Aligner des lignes ou des colonnes
La première propriété que nous voyons,flex-direction
, détermine si le conteneur doit aligner ses éléments sous forme de lignes ou de colonnes:
flex-direction: row
place les éléments en tant querangée, dans le sens du texte (de gauche à droite pour les pays occidentaux)flex-direction: row-reverse
place des éléments commerow
mais dans la direction opposéeflex-direction: column
place des éléments dans uncolonne, commande de haut en basflex-direction: column-reverse
place les éléments dans une colonne, tout commecolumn
mais dans la direction opposée
Alignement vertical et horizontal
Par défaut, les éléments commencent à gauche siflex-direction
estrow
, et du haut siflex-direction
estcolumn
.
Vous pouvez modifier ce comportement en utilisantjustify-content
pour changer l'alignement horizontal, etalign-items
pour modifier l'alignement vertical.
Changer l'alignement horizontal
justify-content
a 5 valeurs possibles:
flex-start
: aligner sur le côté gauche du conteneur.flex-end
: aligner sur le côté droit du conteneur.center
: aligner au centre du conteneur.space-between
: afficher avec un espacement égal entre eux.space-around
: afficher avec un espacement égal autour d'eux
Changer l'alignement vertical
align-items
a 5 valeurs possibles:
flex-start
: aligner sur le haut du conteneur.flex-end
: aligner sur le fond du conteneur.center
: aligner au centre vertical du conteneur.baseline
: affichage à la ligne de base du conteneur.stretch
: les articles sont étirés pour s'adapter au conteneur.
Une note surbaseline
baseline
ressemble àflex-start
dans cet exemple, car mes boîtes sont trop simples. Vérifierce Codepenpour avoir un exemple plus utile, que j'ai tiré d'un stylo créé à l'origine parMartin Michálek. Comme vous pouvez le voir, les dimensions des éléments sont alignées.
Envelopper
Par défaut, les éléments d'un conteneur Flexbox sont conservés sur une seule ligne, ce qui les réduit pour qu'ils tiennent dans le conteneur.
Pour forcer les éléments à se répartir sur plusieurs lignes, utilisezflex-wrap: wrap
. Cela distribuera les articles en fonction de l'ordre défini dansflex-direction
. Utilisationflex-wrap: wrap-reverse
pour inverser cet ordre.
Une propriété abrégée appeléeflex-flow
vous permet de spécifierflex-direction
etflex-wrap
en une seule ligne, en ajoutant leflex-direction
valeur en premier, suivi deflex-wrap
valeur, par exemple:flex-flow: row wrap
.
Propriétés qui s'appliquent à chaque élément
Depuis, nous avons vu les propriétés que vous pouvez appliquer au conteneur.
Les éléments uniques peuvent avoir une certaine indépendance et flexibilité, et vous pouvez modifier leur apparence à l'aide de ces propriétés:
order
align-self
flex-grow
flex-shrink
flex-basis
flex
Voyons-les en détail.
Déplacer des éléments avant / après un autre en utilisant la commande
Les articles sont commandés en fonction d'un ordre qui leur est attribué. Par défaut, chaque article a une commande0
et l'apparence dans le HTML détermine l'ordre final.
Vous pouvez remplacer cette propriété en utilisantorder
sur chaque élément distinct. Il s'agit d'une propriété que vous définissez sur l'élément, pas sur le conteneur. Vous pouvez faire apparaître un élément avant tous les autres en définissant une valeur négative.
Alignement vertical avec align-self
Un article peut choisir depasser outrele containeralign-items
réglage, utilisationalign-self
, qui a les 5 mêmes valeurs possibles dealign-items
:
flex-start
: aligner sur le haut du conteneur.flex-end
: aligner sur le fond du conteneur.center
: aligner au centre vertical du conteneur.baseline
: affichage à la ligne de base du conteneur.stretch
: les articles sont étirés pour s'adapter au conteneur.
Agrandir ou réduire un article si nécessaire
Flex-Grow
The defaut for any item is 0.
Si tous les éléments sont définis comme 1 et l'un est défini comme 2, l'élément le plus grand prendra l'espace de deux éléments «1».
flex-shrink
The defaut for any item is 1.
Si tous les éléments sont définis comme 1 et l'un est défini comme 3, l'élément le plus grand rétrécira 3 fois les autres. Lorsque moins d'espace est disponible, cela prendra 3 fois moins d'espace.
flex-base
Si défini surauto
, il dimensionne un article en fonction de sa largeur ou de sa hauteur, et ajoute de l'espace supplémentaire en fonction duflex-grow
biens.
S'il est défini sur 0, il n'ajoute pas d'espace supplémentaire pour l'élément lors du calcul de la mise en page.
Si vous spécifiez une valeur de nombre de pixels, il l'utilisera comme valeur de longueur (la largeur ou la hauteur dépend s'il s'agit d'un élément de ligne ou de colonne)
fléchir
Cette propriété combine les 3 propriétés ci-dessus:
flex-grow
flex-shrink
flex-basis
et fournit une syntaxe abrégée:flex: 0 1 auto
Téléchargez mon gratuitManuel CSS
Plus de didacticiels CSS:
- Le guide Flexbox
- Tutoriel CSS Grid
- Variables CSS (propriétés personnalisées)
- Introduction à PostCSS
- La propriété CSS margin
- Comment centrer un élément avec CSS
- Polices système CSS
- Comment imprimer votre HTML avec style
- Un guide d'introduction aux transitions CSS
- Un didacticiel sur les animations CSS
- Introduction au CSS
- Le guide CSS
- Comment configurer Tailwind avec PurgeCSS et PostCSS
- La feuille de triche de Tailwind
- Comment faire pivoter en continu une image en utilisant CSS
- Rendre un tableau réactif en utilisant CSS
- Comment déboguer CSS en divisant en deux
- Sélecteurs CSS
- Cascade CSS
- Spécificité CSS
- Sélecteurs d'attributs CSS
- Couleurs CSS
- Unités CSS
- URL CSS ()
- Typographie CSS
- Le modèle CSS Box
- La propriété de position CSS
- Requêtes multimédias CSS et conception réactive
- Requêtes de fonctionnalités CSS
- Transformations CSS
- Comment styliser des listes en utilisant CSS
- Préfixes de fournisseur CSS
- Héritage CSS
- Pseudo-classes CSS
- Pseudo éléments CSS
- Styliser les tableaux HTML avec CSS
- La propriété d'affichage CSS
- La fonction CSS calc ()
- Bordures CSS
- Importer un fichier CSS avec @import
- Gestion des erreurs CSS
- Filtres CSS
- Dimensionnement de la boîte CSS
- Arrière-plans CSS
- Commentaires CSS
- Polices CSS
- Remplissage CSS
- La propriété CSS float et la compensation
- Normalisation CSS
- La propriété CSS z-index
- Comment désactiver la sélection de texte à l'aide de CSS
- Comment mettre un élément au bas de son conteneur en utilisant CSS
- Comment inverser les couleurs en utilisant CSS
- Balises pré réactives en CSS
- Intégrations de vidéos YouTube réactives
- Quelles sont les bonnes valeurs CSS Breakpoint pour le Responsive Design?
- Comment aligner le centre dans Flexbox