Comprendre chaque paramètre Flexbox dans Divi 5

Flexbox et Divi 5 sont un duo puissant qui permet aux utilisateurs de Divi de créer des dispositions étonnantes et réactives. Dans cet article, nous fournirons le guide ultime de la compréhension et de l'utilisation de chaque paramètre Flexbox pour créer facilement des dispositions flexibles et réactives.

Flexbox est au cœur du constructeur visuel remanié de Divi 5, permettant aux utilisateurs de créer des conceptions étonnantes avec un contrôle inégalé. Le système de disposition Flexbox de Divi 5 fait des dispositions complexes un jeu d'enfant, de l'alignement du contenu à la construction de grilles dynamiques.

Plongeons-nous.

Qu'est-ce que Flexbox?

Flexbox est un modèle de mise en page CSS conçu pour faciliter la disposition, aligner et distribuer des éléments dans un conteneur, même lorsque leurs tailles sont dynamiques. Contrairement aux dispositions traditionnelles du CSS qui reposent sur des flotteurs ou un positionnement, Flexbox offre un moyen intuitif de construire des conceptions flexibles et réactives, ce qui en fait une pierre angulaire du développement Web moderne.

Abonnez-vous à notre chaîne YouTube

Concepts clés de Flexbox

Flexbox fonctionne autour de plusieurs concepts fondamentaux:

• CONTUTER FLEX: L'élément parent qui a l'affichage: Flex ou en ligne appliqué, établissant le contenu Flex. Ce conteneur dicte comment ses enfants se comportent dans la disposition.
• Éléments flexibles: les enfants directs du conteneur flexible, qui sont disposés et alignés en fonction des propriétés flexibles du conteneur.
• Axe principal et axe transversal: Flexbox fonctionne le long d'un axe principal (horizontal en ligne ou vertical comme colonne) et un axe transversal perpendiculaire. La direction de l'axe principal peut s'adapter à différents modes, tels que la gauche à droite à gauche, offrant une flexibilité pour les conceptions mondiales.

Flexbox dans Divi 5: une nouvelle ère

Le système de mise en page Flexbox de Divi 5 est intégré au constructeur visuel, permettant aux utilisateurs de Divi de créer des dispositions réactives avec des commandes intuitives. Ces paramètres sont principalement appliqués aux sections, lignes, colonnes et groupes de modules, vous permettant de manipuler visuellement le comportement de mise en page sans écrire CSS. Flexbox facilite l'alignement, la réorganisation et la transformation facilement des éléments.

Accéder à Flexbox dans Divi 5

L'accès à Flexbox dans Divi 5 est simple et intuitif. Ouvrez le constructeur visuel, ajoutez une nouvelle ligne et dirigez-vous à l'onglet Design. Vous trouverez des paramètres Flexbox sous la liste déroulante de la mise en page.

Ces paramètres sont appliqués au niveau du conteneur Flex (sections, rangées, etc.), contrôlant le comportement de leurs éléments flexibles. L'interface de Divi affiche les paramètres via des options conviviales, ce qui facilite Flexbox pour les utilisateurs de tous les niveaux de compétence.

Passons à chaque paramètre afin que vous puissiez mieux comprendre comment ils fonctionnent et comment les utiliser pour construire des dispositions.

Déchange détaillée des paramètres Flexbox dans Divi 5

Vous trouverez ci-dessous un guide de chaque paramètre lié à Flexbox dans Divi 5. Chaque paramètre comprend son objectif, ses options disponibles et ses cas d'utilisation pratiques pour vous aider à les appliquer efficacement.

Style de mise en page

Flex est l'option par défaut dans le menu déroulant Style Layout. Lorsque vous définissez un conteneur sur Flex, il devient un conteneur flexible. Ses éléments enfants directs (éléments flexibles) peuvent ensuite être alignés de manière flexible à l'aide des propriétés CSS Flexbox.

D'un autre côté, Block est la façon traditionnelle des dispositions gérées par Divi dans le passé. Les éléments dans un conteneur de blocs sont traités comme des éléments au niveau du bloc. Cela signifie qu'ils s'empilent généralement verticalement, en prenant toute la largeur disponible du conteneur parent.

Écart horizontal et vertical

Dans les paramètres Flexbox de Divi 5, les contrôles d'espace horizontale et verticale fonctionnent comme la propriété CSS GAP. Ils fournissent un moyen efficace d'ajouter un espacement cohérent entre les éléments enfants dans un conteneur.

L'espace horizontal définit l'espace entre les éléments flexibles lorsqu'ils sont disposés horizontalement. Dans l'exemple ci-dessous, l'espace horizontal crée l'espace vide entre chaque colonne, mais pas sur les bords extérieurs du conteneur flexible. Par défaut,% est sélectionné, mais vous pouvez utiliser les propriétés CSS de Divi 5 ici.

L'espace vertical définit l'espace entre les rangées d'articles. Cela devient incroyablement important lorsque vous activez l'emballage de mise en page (plus à ce sujet plus tard). Il s'applique également lorsque la direction de disposition est définie sur la colonne ou la colonne inverse .

Direction de disposition

L'option de direction de disposition dans Divi 5 (propriété de direction flexible dans CSS) est l'un des contrôles les plus fondamentaux. Il détermine l'axe primaire le long desquels les éléments enfants dans le conteneur seront organisés.

Considérez-le comme mis en place le flux de votre contenu. Il y a quatre choix principaux: la ligne, la ligne inverse, la colonne et la colonne inverse. La ligne est le paramètre le plus courant. Les articles flexibles s'organiseront horizontalement, de gauche à droite. Il est idéal pour créer des dispositions de colonnes horizontales traditionnelles, des menus de navigation, des éléments côte à côte ou chaque fois que vous voulez que les éléments traversent la page.

Avec la ligne inversée , les éléments organisent toujours horizontalement, mais dans la direction opposée.

Lorsque vous sélectionnez la colonne , les éléments s'organiseront verticalement, de haut en bas. Il s'agit d'une bonne option pour empiler les modules dans une seule colonne, créant des listes verticales de contenu ou des dispositions de construction où les éléments doivent circuler vers le bas.

La colonne inverse fonctionne de la même manière que la colonne, l'empilement des éléments dans un conteneur verticalement, mais inverse.

Justifier le contenu

L'option de contenu Justification de Divi 5 (la propriété Justify-Content in CSS) contrôle l'alignement des éléments Flex le long de l'axe principal du conteneur Flex.

Les options incluent Start (Flex-Start dans CSS), qui aligne les éléments au début de l'axe principal. Le centre aligne les éléments au milieu de l'accès principal. Lorsque vous utilisezla direction de la disposition> Row, les éléments centreront horizontalement. Si vous utilisezla direction de disposition> colonne, les éléments se concentreront verticalement.La finaligne les éléments à la fin (à droite ou en bas, en fonction de la sélection de votre ligne ou de votre colonne).

Utilisezl'espace entre les élémentsuniformément les éléments le long de l'axe principal. Le premier élément s'aligne avec Start, tandis que le dernier s'aligne sur la fin du conteneur. L'espace autour distribue uniformément les éléments le long de l'axe principal, avec un espace égal autour de chaque élément. Enfin, l'espace distribue uniformément les éléments où l'espacement entre deux éléments adjacents et l'espace avant le premier et après le dernier élément est le même.

Aligner les articles

Les options d'alignementdes éléments(la propriété Align-Items CSS) dans les paramètres Flexbox de Divi 5 contrôlent comment les éléments Flex s'alignent le long de l'axe transversal du conteneur Flex. Cette option diffère de justifier le contenu, qui aligne les éléments le long de l'axe principal.

Lorsque vous définissezla direction de la dispositionsurla ligneoula ligne inversée, l'axe croisé devient vertical. Cela permetà Aligner les élémentsde contrôler l'alignement vertical des éléments dans une ligne. Si vous définissezla direction de dispositionsurla colonneoula colonne inverse, l'axe croisé est horizontal. Par conséquent, les éléments d'alignement contrôleront l'alignement horizontal des éléments dans la colonne.

Il existe quatre options principales, y compris Start, qui aligne les éléments au début, au centre, à la fin et à l'étirement, qui étire les articles pour remplir l'espace disponible complet le long de l'axe transversal du conteneur. Un élément avec une hauteur ou une largeur spécifique attribuée remplacera l'étirement.

Emballage de mise en page

Dans les paramètres Flexbox de DiVI 5, l'enveloppement de mise en page (propriété CSS-WAP-wrap) détermine ce qui se passe lorsque les éléments flexibles à l'intérieur d'un conteneur Flex sont à court d'espace pour envelopper la ligne suivante lorsque l'espace se serre. Il y a trois options dans Divi 5, notamment sans enveloppement, envelopper et envelopper.

Aucun enveloppe n'est le paramètre par défaut, qui indique au conteneur flexible d'essayer d'adapter tous les éléments Flex sur une seule ligne ou colonne, quel que soit l'espace disponible. Si les articles sont trop larges pour s'adapter, ils débordent du conteneur (s'étendre au-delà des limites) ou se rétrécir pour s'adapter. La pellicule permet aux éléments de s'enrouler sur une nouvelle ligne ou une nouvelle colonne si elles dépassent l'espace alloué sur la ligne. Enveloppant le revers fonctionne de la même manière pour envelopper, mais ils le font dans la direction opposée lorsqu'elle se termine à la ligne suivante.

Commandes flexibles au niveau du module

En plus d'avoir des contrôles Flexbox aux niveaux de la section, des lignes et des colonnes, Divi 5 vous donne également un contrôle précis sur les modules de divi individuels. Par exemple, lorsque vous utilisez un module de groupe, vous pouvez ajuster l'espacement (GAP), la direction de disposition et tous les autres paramètres Flexbox de Divi 5.

Avantages de Flexbox

Flexbox dans Divi 5 n'est pas seulement une mise à niveau technique. Il offre un meilleur moyen de créer des sites Web modernes et réactifs plus facilement et plus efficacement. En intégrant Flexbox dans le constructeur visuel, Divi 5 permet aux utilisateurs de tous les niveaux de compétence d'exploiter la puissance de CSS sans écrire de code. Voici quelques raisons pour lesquelles Flexbox est une mise à niveau si percutante de Divi 4:

Contrôle de mise en page intuitif sans code

Divi 5 intègre les paramètres Flexbox directement dans le constructeur visuel, vous permettant d'ajuster l'alignement, l'espacement et la commande avec des options simples. Que vous créiez des hauteurs de colonnes égales ou du contenu de centrage verticalement, Flexbox facilite les dispositions complexes.

Meilleure conception réactive

Le système de mise en page Flexbox de Divi 5 rend la conception réactive un jeu d'enfant, grâce aux commandes de mise en page personnalisables pour les ordinateurs de bureau, les tablettes et les smartphones. L'option de structure de colonne de modification de Divi vous permet de modifier le nombre de colonnes sur les tablettes et les smartphones, tout en laissant la structure de colonne de la disposition intacte sur les ordinateurs de bureau.

Flexbox + lignes imbriquées

La combinaison de lignes imbriquées et de flex -box dans Divi 5 vous permet de créer facilement des dispositions complexes à plusieurs niveaux. Par exemple, vous pouvez créer une ligne avec des colonnes contenant sa propre ligne, permettant des conceptions sophistiquées comme des grilles ou des sections de contenu en couches.

Groupes de modules Flexbox +

Les groupes de modules en divi 5 agissent comme des conteneurs flexibles, vous permettant de styliser et de positionner les modules de groupe comme une unité cohésive. Cela permet de créer des sections dynamiques, telles que des boîtes de fonctionnalité ou des cartes de témoignages, qui s'adaptent automatiquement aux modifications de contenu tout en maintenant un espacement et un alignement cohérents.

Amélioration des performances et de la simplicité

En remplaçant les sections spécialisées et FullWidth de Divi 4 par un système basé sur Flexbox unifié, Divi 5 rationalise le processus de conception, réduisant la complexité et améliorant les performances. Cela signifie des temps de chargement plus rapides et une expérience d'édition plus fluide, en particulier pour les sites Web grands ou lourds de contenu.

Modèles Flexbox prédéfinis pour des départs rapides

Divi 5 introduit de nouveaux modèles de lignes qui exploitent Flexbox pour fournir des dispositions prédéfinies et flexibles comme des colonnes égales, des colonnes de décalage, des grilles multi-rangs et des grilles multi-colonnes. Ces modèles inspirent la créativité, vous permettant de sauter des conceptions avec des structures entièrement personnalisables via des paramètres Flexbox.

Flux de travail de conception future

Alors que Divi 5 continue d'évoluer dans sa phase publique alpha, son système de mise en page Flexbox positionne les utilisateurs divi à l'avant-garde de la conception Web moderne. En maîtrisant Flexbox maintenant, vous vous équipez des compétences qui s'alignent sur les normes de l'industrie, en vous assurant que vos sites Web restent adaptables aux futures mises à jour.

Déverrouiller le potentiel créatif avec Flexbox dans Divi 5

Flexbox dans Divi 5 modifie la façon dont les utilisateurs créent des dispositions réactives et dynamiques. Divi 5 permet aux utilisateurs de créer des sites Web époustouflants et modernes sans écrire de code en intégrant de manière transparente les propriétés CSS Flexbox puissantes dans le constructeur visuel. Des commandes d'alignement intuitif et d'espacement aux fonctionnalités avancées comme les lignes imbriquées et les groupes de modules, le système de mise en page Flexbox simplifie les conceptions complexes tout en garantissant des dispositions parfaitement réactives qui ont fière allure sur tous les appareils.