L'incroyable pouvoir de flexbox

Sep 15, 2025

Comment

[dix] [dix] [dix]

[dix]

Flexbox, ou la disposition de la boîte flexible, est un puissant module de mise en page CSS qui donne des concepteurs Web et des développeurs un moyen efficace et simple de disposer, d'aligner et de distribuer des éléments dans un conteneur. Il résout de nombreux problèmes de mise en page que nous avons du mal à résoudre pendant longtemps.

[dix]

Bases de base de Flexbox

Dans sa forme la plus élémentaire, Flexbox est composée de deux éléments: un conteneur flexible (ou un parent flexible) et des éléments flexibles (flexfants). Un conteneur flex est un élément contenant (comme un diviser ) Compte tenu de la propriété d'affichage fléchir . Les éléments Flex sont des éléments d'enfant d'un conteneur flex, qui peut être manipulé à travers diverses propriétés d'affichage.

Flex Conteners et éléments Flex ont chacun leur propre gamme de propriétés pouvant être combinées de différentes manières de créer une gamme de mises en page complexes. Les articles à l'intérieur d'un conteneur Flex peuvent être aménagés horizontalement ou verticalement, alignés et distribués de différentes manières, et étiré ou rétréci pour s'adapter à l'espace disponible. Toutes ces options vous permettent de créer facilement des mises en page réactives.

Comment utiliser flexbox

Pour commencer à utiliser Flexbox, vous devez d'abord créer votre conteneur Flex (l'élément parent contenant vos éléments Flex). Dans cet exemple, nous allons utiliser un diviser bloquer. Avant de styler l'élément, ajoutons trois autres diviser Blocs à l'intérieur de notre conteneur Flex pour servir d'éléments Flex. À ce stade, les articles seront empilés.

Avec notre enfant divs en place, nous pouvons définir la propriété d'affichage du conteneur parent pour fléchir .

[dix]

 Flex Conteneur {
Affichage: flex;
}

Directions de layout

La direction de la mise en page est simplement la direction que vos éléments se distribueront. La direction par défaut d'un conteneur Flex est rangée , qui affichera les éléments de l'enfant horizontalement. Vous pouvez changer la mise en page en vertical en réglant la direction à colonne .

 Flex Conteneur {
Affichage: flex;
Flex-direction: rangée;
}

Flex conteneur {
Affichage: flex;
Flex-direction: colonne;
}

Quelle que soit la direction que vous avez définie sur votre conteneur Flex est appelée sa direction «principale», tandis que l'autre direction que vous n'avez pas choisie devient la direction «croix». Ainsi, par défaut, la direction principale sera horizontale et la direction croisée sera verticale.

Flexbox vous permet également d'inverser la mise en page. Lorsqu'il est inversé, les enfants d'un conteneur flex seront aménagés à gauche (si la direction est rangée ) ou inférieur à haut (si la direction est colonne ).

 Flex Conteneur {
Affichage: flex;
Direction Flex: Row-Revers;
}

Flex conteneur {
Affichage: flex;
Flex-direction: colonne-inverse;
}

Cela peut être utile si vous souhaitez inverser la mise en page sur des écrans plus petits.

Par exemple, disons sur les écrans de bureau que vous souhaitez afficher du texte sur le côté gauche de l'écran et une image à droite (voir image de surf ci-dessus). Sur mobile, cela déplacerait l'image sous le texte. En inversant la direction, vous pouvez vous assurer que l'image apparaît au-dessus du texte.

Ajuster l'alignement

Les paramètres de Flexbox vous donnent également deux méthodes différentes pour aligner le contenu: verticalement et horizontalement. Voici vos options d'alignement horizontal pour les articles à l'intérieur d'un conteneur Flex:

flexion : Articles définis vers le début de la ligne (à gauche, sauf si vous avez inversé la mise en page)

centre : Articles centrés dans la rangée

flexion : Articles définis vers la fin de la rangée (à droite, sauf si vous avez inversé la mise en page)

l'espace entre : Articles répartis uniformément le long de la ligne

space-autour : Articles répartis de manière uniforme le long de la rangée, avec un espace égal de chaque côté de chaque élément

Donc, le code pourrait ressembler à ceci:

 Flex Conteneur {
Affichage: flex;
Flex-direction: rangée;
Contenu aligné: flex-start | flex-extrémité | Centre | espace entre | espace-autour | s'étirer;
}

[dix]

Voici vos options d'alignement vertical pour les articles dans un conteneur Flex:

flexion : Articles alignés sur le haut de la rangée

centre : Les articles sont centrés dans la rangée

flexion : Articles alignés au fond de la rangée

s'étirer : Articles étirés sur la hauteur de la rangée

base : Les articles alignés sur leurs bases de base (la ligne imaginaire que le texte se trouve)

Le code pourrait ressembler à ceci:

 Flex Conteneur {
Affichage: flex;
Flex-direction: rangée;
Align-items: flex-start | flex-extrémité | Centre | BASELLE | s'étirer;
}

Par défaut, les enfants d'un conteneur Flex essaieront toujours de s'adapter à une seule ligne. Si vous voulez changer cela, vous pouvez ajouter le envelopper attribut. Cela permet aux enfants de s'enrouler à une nouvelle ligne s'ils manquent d'espace.

 Flex Conteneur {
Affichage: flex;
Flex-Wrap: enveloppe;
}

Flex Les éléments obtiennent également leurs propres propriétés à base de flex. Lorsqu'un élément est placé dans un conteneur Flex, il devient automatiquement un enfant flexible et obtient son propre ensemble de styles CSS à base de Flex. Ces styles contrôlent le dimensionnement, l'alignement et l'ordre d'affichage.

Dimensionnement flexible

Les enfants Flex peuvent modifier leur largeur ou leur hauteur (en fonction de la direction de la disposition du conteneur) pour remplir l'espace disponible.

Webflow vous donne trois options prédéfinies pour le dimensionnement flexible: rétrécissez si nécessaire, remplissez l'espace vide et ne vous rétrécissez pas. Notez que chaque élément enfant peut avoir ses propres paramètres, ce qui permet une pléthore d'options de conception.

 Flex Item {
flex-rétrécissement: & lt; nombre & gt ;;
flex-grandir: & lt; nombre & gt ;;
Flex-Base: & lt; longueur & gt; | auto;
}

Jetons un coup d'œil à ce que chacune de ces options fait:

Rétrécir si nécessaire: Tailles L'article basé sur sa largeur / sa hauteur ou sa teneur. L'article ne poussera pas plus grand que nécessaire, mais peut rétrécir à sa taille minimale pour éviter le débordement
Remplir l'espace vide: Permet à l'article de se développer pour remplir tous les espaces disponibles à l'intérieur de son parent. Si vous définissez cela sur tous les éléments d'un conteneur Flex, ils vont se développer pour prendre des quantités égales d'espace vide.
Ne vous rétrécissez pas: Tailles de l'article basé sur sa largeur / sa hauteur ou sa teneur, mais ne lui permet pas de rétrécir, même si cela provoquera un débordement

Les éléments Flex peuvent également avoir leurs propres paramètres d'alignement, qui remplacent l'alignement par défaut défini par leur conteneur parent Flex. Ces alignements se comportent comme expliqué précédemment.

 Flex Item {
Affichage: flex;
Flex-direction: rangée;
Align-items: flex-start | flex-extrémité | Centre | BASELLE | s'étirer;
}

Par défaut, les éléments Flex affichent dans le même ordre qu'ils apparaissent dans le code source. Avec Flexbox, vous pouvez remplacer ce comportement pour assurer l'affichage des éléments dans l'ordre de votre choix.

Les quatre options principales que vous pouvez utiliser ici:

Auto : La valeur par défaut, qui commande des éléments comme ils sont dans la source
Première : L'élément apparaît d'abord dans son conteneur Flex
Dernier : L'article apparaît durer dans son conteneur Flex
Personnalisé : Vous pouvez personnaliser la commande que votre article sera affiché dans

La commande personnalisée peut être définie comme un numéro, qui spécifie la commande dans laquelle l'élément Flex apparaît dans un conteneur Flex.

 Flex Item {
Commandez: & lt; Integer & GT ;;
}

Pourquoi devrais-je l'utiliser?

Je suis content que tu aies posées! L'utilisation de Flexbox vous permet de créer facilement des aménagements réactifs une fois très difficiles (ou impossibles) de créer avec des modules de mise en page plus anciens CSS.

Jetez un coup d'œil aux exemples de l'image ci-dessous - beaucoup dont vous avez probablement déjà vu sur le Web. Presque tous prenaient une quantité considérable de CSS (en particulier sur différentes tailles d'écran), mais ne prennent que quelques lignes simples à réaliser avec Flexbox. Pour voir ces exemples en action, visitez flexbox.webflow.com .

[dix] [dix]

[dix]

L'incroyable pouvoir de flexbox

Bases de base de Flexbox

Comment utiliser flexbox

Directions de layout

Ajuster l'alignement

Dimensionnement flexible

Pourquoi devrais-je l'utiliser?

Comment - Most Popular Articles

Comment rechercher Photoshop quelqu'un dans une image

Comment créer des analyses 3D avec la capture de la réalité

Comment utiliser des couches intelligentes dans Photoshop

Comment dessiner un nez

Apprendre à faire pousser le feuillage avec des particules X

Comment créer une lampe de lava avec Keyshot

Comment faire de délicieuses textures avec des crayons

Comment sculpter et poser une tête de dessin animé dans zbrush

Catégories