Qu'est-ce que Flexbox (et pourquoi vous devriez l'utiliser)

Vous pouvez construire des sections propres toute la journée, mais l'alignement des éléments sur chaque taille d'écran peut commencer à ressembler plus à des essais et à des erreurs que la conception intentionnelle.

Flexbox corrige cela. Il vous donne un véritable contrôle sur la façon dont les éléments sont assis, étirent, rétrécissent et enveloppez dans un récipient, sans ajustement constant des marges et du rembourrage. Dans ce guide, nous allons briser le fonctionnement de Flexbox, comment il simplifie les dispositions et comment l'utiliser visuellement à l'intérieur du divi 5 sans écrire une seule ligne de code.

Qu'est-ce que Flexbox

Flexbox, court pour la disposition flexible des boîtes , est un modèle de mise en page qui simplifie la façon dont les éléments s'alignent et l'espace eux-mêmes à l'intérieur d'un conteneur. Plutôt que de positionner chaque élément manuellement à l'aide de marges ou de largeurs fixes, Flexbox vous permet de définir comment ces éléments doivent se comporter en fonction de l'espace disponible.

Les éléments devraient-ils se développer pour remplir une place supplémentaire? Rétrécir quand l'espace est serré? Devraient-ils envelopper la ligne suivante lorsqu'ils ne s'adaptent plus? Vous faites ces choix à travers un ensemble de propriétés que vous appliquez au conteneur et à ses enfants. C'est ainsi que vous décidez comment votre disposition doit réagir.

Prenons des exemples pratiques pour comprendre cela. Dites que vous avez trois boutons à l'intérieur d'une rangée horizontale. Avec Flexbox, vous pouvez les centrer tous uniformément à l'intérieur du conteneur:

Décidez que le bouton du milieu devrait prendre plus de place que les autres:

Ou vous voudrez peut-être que les boutons s'empilent automatiquement lorsque l'écran devient plus étroit:

Flexbox rend tout cela possible avec des propriétés simples comme Justify-Centante, Flex-Wrap et Flex-Grow.

De plus, il vous permet de contrôler comment les éléments sont espacés, alignés sur différents axes et commandés visuellement, sans modifier leur position réelle dans le constructeur. Vous pouvez centrer du contenu, le pousser en haut ou en bas du conteneur, aligner un élément différemment du reste, ou même inverser la commande entière à travers les points d'arrêt.

Vous pourriez penser: je ne peux pas déjà faire cela avec des marges et un rembourrage?

Tu as raison. Vous pouvez centrer des éléments manuellement ou ajuster leur taille avec des largeurs personnalisées. Cependant, ces méthodes reposent sur le positionnement de chaque élément individuellement. Vous ajustez chaque élément un à la fois, pour chaque taille d'écran.

Flexbox déplace ce processus entièrement. Au lieu de traiter chaque élément séparément, il vous permet de définir une fois les règles de mise en page au niveau du conteneur. Vous dites au conteneur comment ses enfants devraient se comporter dans différents scénarios, et cela les ajuste au besoin.

Cette approche rend les dispositions plus cohérentes, plus faciles à gérer et plus flexibles à mesure que les conceptions évoluent, en particulier lorsque la taille des écrans change ou que de nouveaux modules sont ajoutés.

Comment la direction flexible affecte l'alignement

L'un des premiers choix que vous faites dans Flexbox est la direction dans laquelle les éléments doivent circuler, que ce soit en ligne ou en colonne. La propriété Flex-Direction le définit et définit comment les éléments s'alignent, s'enveloppent et espèrent eux-mêmes à l'intérieur du conteneur.

Comprenons cela mieux parce que les propriétés communes comme Justify-Content et Align-Content dépendent entièrement de la direction définie. Ils ne fonctionnent pas sur la disposition par défaut du navigateur, mais les axes créés par Flexbox: l' axe principal et l' axe transversal . L'axe principal suit la direction que vous définissez avec Flex-Direction: Horizontal pour les lignes, verticale pour les colonnes. L'axe croisé va dans l'autre sens: vertical pour les lignes, horizontal pour les colonnes.

Ainsi, l'axe principal s'exécute de gauche à droite lorsque la direction est réglée sur Row. Cela signifie que Justify-Content déplace des éléments à travers la ligne et que les éléments aligns contrôlent comment ils s'alignent verticalement dans cette ligne.

Et lorsque vous basculez la direction à la colonne, toute la logique d'alignement se retourne. L'axe principal s'exécute désormais de haut en bas, ce qui signifie que Justify-Contant aligne les éléments verticalement, et Align-Items ajuste leur position de gauche à droite.

Cela peut sembler un peu déroutant au début, mais une fois que vous voyez comment les axes principaux et transversaux réagissent à la direction, il clique. Vous commencerez à repérer les modèles et les décisions de mise en page seront plus intuitives. Il y a aussi un tableau de référence rapide ci-dessous si vous voulez revérifier les choses tout en vous entraînant.

Syntaxe et propriétés communes Flexbox

Communiquez la propriété d'affichage d'un conteneur du bloc à la flexion pour activer Flexbox. Lorsque vous faites cela, le navigateur commence à traiter les éléments intérieurs tels que les lignes, les boutons, les cartes ou les icônes comme éléments flexibles.

.container {
display: flex;
}

De là, vous utilisez différentes propriétés Flexbox pour contrôler le comportement. Par exemple, Justify-Contant décide comment les éléments sont espacés le long de l'axe principal (ceci est défini sur horizontal par défaut, Flex-Direction: Row) . Utilisez Flex-Start pour aligner les éléments à gauche, Flex-End pour les pousser à droite, le centre pour les centrer ou l'espace entre les deux et l'espace pour les étaler uniformément.

Par défaut, Flexbox essaie d'adapter tous les éléments sur une seule ligne. S'il y en a trop, ils se rétréciront pour s'adapter en fonction de leurs paramètres de flexion-shrink, et s'ils ne peuvent pas se rétrécir, ils peuvent déborder le récipient. Pour éviter cela, allumez le wabre flexible afin que les éléments se déplacent sur une nouvelle ligne au lieu de s'entasser en un seul.

Vous pouvez déjà penser à de nombreux cas d'utilisation où ces deux propriétés peuvent résoudre des problèmes de mise en page. Mais il y en a beaucoup plus, et chacun vous donne un contrôle spécifique sur la taille, l'ordre, l'alignement et l'espacement.

Si vous êtes curieux de voir comment ceux-ci fonctionnent réellement de manière ludique et pratique, essayez Flexbox Froggy. C'est un petit jeu amusant où vous appliquez un vrai code Flexbox pour déplacer les grenouilles dans un étang. En cours de route, vous arrêtez de deviner et commencez à reconnaître exactement ce que fait chaque propriété.

Pourquoi utiliser Flexbox

À ce jour, vous avez vu comment Flexbox change comment les dispositions réagissent à l'espace. Mais la valeur réelle vient de ce que ce changement vous permet de faire plus facilement. Flexbox transforme les défis de la disposition tenace en modèles simples et réutilisables.

• Alignement simplifié: les propriétés comme Justify-Content et Align-Items Center ou Space Items sans s'appuyer sur des ajustements de marge ou des classes d'assistance.
• Réactif par défaut: les articles se développent naturellement, rétrécissent ou enveloppent en fonction de leur espace. Il en résulte des dispositions plus propres qui s'adaptent sans points d'arrêt ajoutés.
• Espacement et dimensionnement automatique: vous contrôlez comment les éléments partagent l'espace avec des propriétés comme Flex-Grow, Flex-Shrink et Flex-Basis, ce qui rend le fluide de mise en page au lieu de fixe.
• Réorganiser sans changer HTML: vous pouvez modifier l'ordre visuel des éléments sans toucher le HTML. La structure reste propre, tandis que la disposition s'ajuste pour différents écrans.
• Moins de hacks de mise en page: vous n'avez plus besoin de flotteurs, de fiches claires ou de scripts de correspondance de hauteur. Flexbox remplace ceux par des options modernes et fiables.

Et parce qu'il est pris en charge dans tous les principaux navigateurs, Flexbox est non seulement efficace mais aussi fiable. Cela en fait un choix moderne et plus fiable pour les projets du monde réel.

Pourquoi Flexbox est souvent meilleur que la grille

Grid est un autre système de mise en page populaire, comme Flexbox. Cependant, les deux sont conçus pour différents cas d'utilisation.

La grille, par exemple, est conçue pour des dispositions bidimensionnelles où vous avez besoin de contrôler les lignes et les colonnes. Les vitrines de produits, les galeries d'images et les dispositions éditoriales de style magazine sont des exemples de grille, car ils s'appuient sur une structure étroitement alignée sur les deux axes.

Vous commencez par définir la grille: combien de lignes et de colonnes il y a, et la largeur ou la hauteur de chacune. Ensuite, vous placez chaque élément dans cette structure.

Ceci est une mise en page de la grille. Les éléments sont alignés sur les deux axes: lignes et colonnes, avec l'espacement fixe et les proportions.

Mais toutes les dispositions n'ont pas besoin de ce niveau de planification.

La plupart du temps, les sections d'interface utilisateur coulent dans une seule direction. Des lignes de cartes, des blocs d'icônes et de texte et des liens de navigation suivent un axe, pas deux. C'est exactement là que Flexbox s'intègre.

Dans une disposition Flexbox, les cartes sont alignées dans une direction (ligne ou colonne), puis enveloppées et espacées en fonction des règles de conteneur.

Vous n'avez pas à cartographier l'intégralité de la disposition à l'avance. Vous dites simplement au conteneur comment les éléments doivent se comporter le long d'un seul axe et Flexbox le gère.

Donc, à moins que vous ne concevez quelque chose qui dépend vraiment d'une grille rigide, Flexbox sera souvent le choix plus rapide, plus simple et plus flexible.

Flexbox dans Divi 5

Tout ce que nous avons appris jusqu'à présent sur Flexbox est génial, mais écrire des CSS personnalisés pour chaque ajustement de mise en page n'est pas ce que vous voulez faire, surtout si vous avez construit votre site à l'aide d'un constructeur visuel comme Divi.

C'est pourquoi Divi 5 comprend désormais des contrôles Flexbox intégrés. Vous n'avez plus besoin de changer d'onglets ou d'ajouter CSS manuellement. Tout cela, et même les comportements de mise en page avancés, est désormais intégré au constructeur visuel, moins le codage et un backend écrasant.

Abonnez-vous à notre chaîne YouTube

Bref, pas besoin de se souvenir des noms de syntaxe ou de propriétés, sélectionnez simplement ce que vous voulez dans l'interface. Cliquez sur n'importe quelle section, ligne ou colonne, dirigez-vous vers l'onglet Design, et sous la mise en page> Style de mise en page , assurez-vous d'utiliser Flex.

Cela ouvre un nouvel ensemble de commandes de mise en page. Ce sont les propriétés Core Flexbox que vous écririez généralement dans CSS, mais maintenant comme des options cliquables. Vous pouvez tester les modifications en direct et voir comment votre contenu réagit.

Donc, même si vous n'avez jamais écrit une seule ligne de code Flexbox, vous ne manquerez rien. Divi 5 vous donne visuellement le même contrôle de disposition avec le même niveau de contrôle, mais beaucoup plus facilité.

Apprenez tout sur le système Flexbox de Divi 5

Nouvelles structures de lignes

Pourquoi divi alors que d'autres constructeurs Web l'ont également? Alors que de nombreux constructeurs Web offrent Flexbox comme option de mise en page, Divi 5 l'approche différemment. Ce n'est pas une fonctionnalité en couches au-dessus d'un système existant; C'est maintenant au cœur du fonctionnement du constructeur.

L'ensemble du moteur de disposition a été reconstruit à partir de zéro avec Flexbox à sa fondation. En conséquence, le comportement de mise en page est plus cohérent et prévisible car il suit une logique de mise en page conçue intentionnellement.

Par exemple, lorsque vous ajoutez une nouvelle section ou une nouvelle ligne dans Divi 5, vous remarquerez immédiatement quelque chose de différent. Nouvelles structures. Chacun s'exécute désormais sur Flexbox par défaut, ce qui signifie que l'alignement, l'espacement et la réactivité sont gérés plus intelligemment dès le début.

Vous n'aurez pas besoin d'allumer Flex pour les nouveaux éléments de conception que vous ajoutez. Et lorsque vous le faites, lors de la modification d'une mise en page ancienne, les outils d'alignement et d'espacement deviennent instantanément plus faciles à gérer.

Vous pouvez également modifier la façon dont les colonnes sont disposées à l'intérieur d'une ligne à l'aide de la structure de la colonne de modification.

Cela ouvre un panneau où vous pouvez sélectionner une nouvelle structure de colonne. La disposition se met à jour immédiatement, avec Flexbox ajustant automatiquement l'espacement et l'alignement.

Essayez d'ajouter quelques types de lignes différents et de redimensionner l'écran. Vous verrez comment tout se déplace et s'adapte sans se décomposer. C'est la force de Flexbox cuit dans le constructeur, faisant de Divi 5 une option plus fiable et moderne.

Comment fonctionne Flexbox dans Divi 5

Si vous commencez, voici une procédure pas à pas rapide pour vous aider à vous sentir confiant lorsque vous utilisez Flexbox dans Divi 5.

Contrôles de disposition

Lorsque vous changez une section, une ligne ou une colonne pour flexion , un nouvel ensemble de contrôles de mise en page apparaît dans les paramètres de conception> Disposition . Ceux-ci vous donnent un contrôle Visual Flexbox à côté de vos options habituelles.

• (1) Style de mise en page: c'est là que vous activez Flex. Une fois défini, d'autres options spécifiques à la flexion comme la direction, l'alignement et l'espacement deviennent visibles.
• (2) GAP HORIZONTAL: ajoute de l'espace entre les éléments de gauche à droite.
• (3) GAPE VERTICAL: définit l'espace entre les éléments empilés lors de l'utilisation de dispositions de colonnes.
• (4) Direction de disposition: modifie le débit, la ligne, la colonne ou les directions inversées, afin que les éléments puissent s'aligner côte à côte ou de haut en bas.
• (5) Justifier le contenu: aligne les éléments le long de l'axe principal. Vous pouvez les centrer, les pousser d'un côté ou les étaler.
• (6) Aligner les éléments: aligne les éléments le long de l'axe transversal, ce qui est utile lors de la disposition des éléments verticalement dans une ligne horizontale.
• (7) Emballage de mise en page: cela permet aux éléments de passer à la ligne suivante lorsque l'espace s'épuise. Utile lors de la construction de dispositions qui répondent à la taille de l'écran au lieu de se casser.

Disons que vous avez un bar de marque avec des logos et que vous voulez qu'ils soient plus grands. Avec une direction flexible réglée sur la ligne et le capture de mise en page activés, ils s'écouleront automatiquement en deux lignes lorsqu'il n'y a pas d'espace.

L'alignement des éléments en deux lignes est désormais facile sans requêtes multimédias ni solution de contournement manuel.

Contrôles et dimensionnement de la colonne

Une fois à l'intérieur d'une ligne compatible Flex, chaque colonne a un nouveau paramètre sous la conception> Dimensionnement appelé classe de colonne . Cela détermine la quantité d'espace d'une colonne en fonction de son contenu et de son environnement.

Vous pouvez choisir entre rétrécir pour s'adapter (ce qui rend la colonne aussi large que son contenu) ou se développer (qui étire la colonne pour occuper un espace supplémentaire).

Par exemple, si vous voulez qu'une colonne de texte se sente plus importante et que vous ayez des éléments de carte qui servent leur contenu, vous définissez les cartes pour rétrécir et le texte à grandir.

Contrôles de commande

Un autre outil puissant, mais souvent négligé, est le paramètre de commande sous l'onglet Contenu . Cela vous permet de réorganiser visuellement les colonnes et les modules sans modifier la structure de disposition dans la vue filaire ou les couches.

Dites que vous voulez qu'un module particulier apparaisse en premier sur mobile mais deuxième sur le bureau. Vous pouvez attribuer différentes valeurs de commande à chaque point d'arrêt.

Cas d'utilisation pratiques de Flexbox

Examinons quelques autres cas d'utilisation Flexbox qui sont désormais simplifiés avec Divi 5.

1. Alignez verticalement n'importe quoi avec Flex

Pendant longtemps, l'alignement vertical a été l'un des problèmes de disposition les plus ennuyeux de la conception Web. Vous essayez des astuces de rembourrage, du positionnement absolu, des marges manuelles, et ainsi de suite pour se retrouver avec quelque chose qui avait l'air bien sur les ordinateurs de bureau mais qui a été cassé sur des écrans plus petits.

Avec Divi 5, ce mal de tête a disparu. Maintenant, si vous souhaitez centrer du contenu verticalement à l'intérieur d'une section, il vous suffit de définir les éléments d'alignement au centre.

C'est ça. La disposition s'adapte automatiquement à travers les points d'arrêt et votre contenu reste toujours dans le sweet spot. Ce qui avait l'habitude de prendre CSS Gymnastics n'est plus que quelques clics à l'intérieur du constructeur.

2. Égaliser automatiquement les hauteurs de la carte

Vous avez probablement rencontré ce problème auparavant. Vous créez une ligne de cartes, comme une section Blurb, et tout semble bien jusqu'à ce qu'un élément ait plus de texte que les autres. Soudain, votre mise en page est inégale. Certaines colonnes s'étendent plus hautes, d'autres restent courtes et la conception perd l'équilibre.

Ce nettoyage manuel n'est plus nécessaire. Lorsque vous changez une ligne ou une section pour flexion, Divi applique des paramètres par défaut qui traitent chaque colonne comme un élément flexible. Cela les fait s'étirer automatiquement pour correspondre à la hauteur de l'autre dans la même ligne, quel que soit le contenu à l'intérieur.

Il reste également réactif. Sur les écrans plus petits, les colonnes s'enveloppent dans de nouvelles lignes sans avoir besoin de réglages supplémentaires, et le comportement de hauteur égal continue de s'appliquer.

3. Enveloppez automatiquement les boutons à travers les points d'arrêt

Garder une rangée de boutons soignés et lisibles sur différentes tailles d'écran peut être une douleur. Vous finissez généralement par ajouter de nouvelles lignes ou ajuster manuellement la disposition pour chaque point d'arrêt. Mais avec Divi 5, ce n'est plus nécessaire.

Allumez la disposition Flex et activez l'enveloppement de mise en page dans la vue de l'ordinateur portable . C'est ça. Les boutons s'envelopperont automatiquement en plusieurs lignes sur des écrans plus petits sans casser la disposition.

Les boutons gardent leur espacement et leur alignement sur des écrans plus grands et se cachent naturellement sur les tablettes et les téléphones. Vous pouvez même affiner leur alignement à l'aide de Justify-Content et contrôler l'espacement entre eux en utilisant GAP, de sorte que tout semble propre et intentionnel à toutes les tailles.

Divi + flexbox a tout de sens

Vous avez vu le fonctionnement de Flexbox, comment Divi 5 le rend visuel et comment les maux de tête courants prennent désormais des secondes au lieu des heures. Divi 5 ne prend pas seulement en charge Flexbox - il est construit autour de lui. Chaque section, ligne et colonne est prête à se comporter comme vous vous en doutez sans CSS personnalisé.

Flexbox n'est pas seulement une option si vous concevez avec Divi 5. C'est la valeur par défaut plus intelligente. Disposés plus propres, moins de solutions de contournement et le contrôle réactif ont cuit directement dans le constructeur. C'est le changement, et c'est quelque chose qui vous prépare à l'avenir de la conception Web.