5 pièges à éviter lors du passage au système de disposition Flexbox de Divi 5

Divi 5 vient de livrer son système de mise en page basé sur Flexbox. Il remplace l'ancien moteur de disposition de blocs de Divi 4 et déverrouille les nouveaux contrôles puissants directement dans le constructeur visuel. Chaque nouvelle ligne est désormais par défaut de la mise en page flexible. À moins que vous n'ayez déjà utilisé CSS Flexbox, ce changement exige un nouvel état d'esprit de conception car Flex fonctionne différemment. Si vous n'ajustez pas vos habitudes, vous serez coincé.

Cette mise à jour vous donne des contrôles visuels pour l'enveloppe, la direction, l'espacement, la commande et l'alignement - tous intégrés. Pas de CSS personnalisés. Il est également livré avec des raccourcis de ligne préconfigurés pour construire des structures de ligne complexes avec un ajustement minimal des paramètres d'affichage. Certaines fonctionnalités basées sur des blocs, comme la spécialité et les sections pleine largeur, sont obsolètes car Flex couvre désormais tous ces cas d'utilisation.

Ce message entre dans les cinq plus gros pièges que vous appuyez lorsque vous appuyez lorsque vous passez à votre modèle mental du bloc à la flexion en Divi 5.

Pitre n ° 1: Forcer Flex dans un état d'esprit de bloc

→ Flex nécessite un nouveau modèle mental, pas seulement de nouveaux contrôles.

Personne n'aime le changement à moins qu'ils ne sachent qu'ils atteignent des limitations très réelles. Pour beaucoup, l'ancien système de mise en page est ce qu'ils savaient et étaient à l'aise. Mais il avait ses limites. Ceux qui en savaient assez sur CSS savaient que l'ancien système manquait des choses que Flexbox a été conçue pour remédier. Éviter les premiers pièges nécessite de comprendre que Flexbox n'est pas seulement une disposition de bloc avec des options supplémentaires .

Dans Divi 4, les modules empilés verticalement par défaut - chaque élément était en dessous de celui avant. Vous pouvez empiler les choses horizontalement avec des colonnes, mais à ce moment-là, vous travailleriez avec plusieurs lignes + colonnes à l'intérieur d'une section pour construire une disposition. C'était prévisible et confortable pour beaucoup, mais cela a également conduit à la réalité frustrante de ne pas pouvoir avoir deux boutons côte à côte et d'autres défis de conception.

Divi 5 fonctionne différemment maintenant car les nouveaux conteneurs (c'est-à-dire les sections, les lignes, les colonnes et les groupes) sont définis sur «flexion» par défaut. Vous obtenez des options plus spécifiques au niveau du conteneur pour organiser des éléments enfants. Flexbox est puissant car il permet des dispositions flexibles où les éléments sont positionnés en fonction de l'espace disponible et du contenu en eux. Plus à ce sujet dans le prochain piège . Cela permet aux dispositions de s'adapter à différentes tailles d'écran et contenu sans s'appuyer sur le positionnement fixe ou absolu. Voici un exemple pour comparer Flex avec Block.

La disposition des blocs empile les modules verticalement le long de l'axe de bloc. Flexbox vous permet de choisir entre la ligne et la colonne comme axe principal.

Chaque paramètre et option dans l'interface utilisateur correspond directement aux propriétés CSS réelles ajoutées à chaque conteneur.

Pitre n ° 2: ne pas savoir comment la flexion se rétrécit et se développez dans le dimensionnement des éléments enfants

→ Sans se rétrécir et grandir, vos dispositions ne se comporteront pas comme prévu.

Avec Flex in Divi 5, les modules enfants peuvent avoir une largeur ou une hauteur de réglage. De plus, ils peuvent rétrécir ou remplir (leur largeur ou hauteur) en fonction de la pièce à l'intérieur du conteneur. Dans cet exemple, les modules de texte sont définis sur 45% de largeur, ce qui signifie que deux modules s'adapteraient horizontalement comme dans la même ligne. Mais si nous ajoutons un nombre impair de modules de texte, nous ne voulons pas qu'il y ait un espace vide. Nous pouvons définir ces modules pour avoir une croissance flexible, puis lorsqu'il y a de l'espace disponible dans une rangée, ces modules se développent pour se remplir.

Divi expose les contrôles comme «Grow to Remplante», «rétrécir pour s'adapter» et les paramètres personnalisés sur les éléments enfants dans n'importe quel conteneur flexible (élément enfant> Conception> Dimensionnement> Grow to Remplacer, se rétrécir pour s'adapter ou personnaliser ).

Régler la hauteur et la largeur sur les éléments enfants semblent familiers si vous êtes habitué à bloquer les dispositions. Mais avec Flexbox, se développer et rétrécir les paramètres vous permettez de combiner le dimensionnement fixe avec un comportement réactif - l'adaptation à l'espace disponible dans chaque conteneur. Il ajoute de la complexité, mais débloque également beaucoup plus de flexibilité.

Le rétrécissement pour s'adapter et grandir pour remplir (en plus de Flex-Basis) sont également très pratiques pour vous aider à créer des dispositions réactives. Pour que les dispositions de blocs soient souvent réactives, vous devez configurer plusieurs points d'arrêt et largeurs / hauteurs à chacun de ces points d'arrêt. Flexbox peut bénéficier de paramètres uniques à divers points d'arrêt, mais comme son nom l'indique, il est très flexible . C'est particulièrement le cas lors de l'utilisation de clamp () pour la typographie. L'utilisation des deux ensemble, ainsi que d'autres unités CSS relatives, briseront votre besoin constant de points d'arrêt.

Regardons un autre exemple construit avec Flexbox.

Le conteneur de colonne (parent) est défini sur flexion avec ces paramètres:

• Écart horizontal et vertical : 30px (cela pourrait utiliser le calc ou la serrage pour être un peu meilleur, même)
• Direction de la disposition : ligne inverse de la ligne (explication de cette décision dans Pitfall # 4)
• Justifier le contenu : centre
• Aligner les articles : Centre
• Flex Wrap : Wrap Inverse (Explication de cette décision dans Pitfall # 4)

J'ai ensuite placé trois éléments enfants à l'intérieur de la colonne. Un module de cap, un module de diviseur et un module de texte. Voici les paramètres pertinents pour chacun:

• Module de cap
  • Taille du texte : pince (2rem, 1.5rem + 2vw, 3rem)
  • Largeur : Auto
  • Taille de flexion : rétrécir pour s'adapter
• Module de diviseur
  • Largeur : Auto
  • Taille flexible : rétrécissez pour s'adapter et grandir pour remplir
• Module de texte
  • Taille du texte : pince (0,9375rem, 0,75rem + 0,4 VW, 1Rem)
  • Largeur : Auto
  • Taille de flexion : rétrécir pour s'adapter

Avec une direction flexible, les éléments enfants s'alignent horizontalement chaque fois qu'il y a de la place. Le module de texte est le plus large, donc il remplit sa propre ligne. Le module de diviseur se développe ou se rétrécit ensuite car il a une largeur automatique et à la fois le flexion et le flex-shrink. Le module d'en-tête utilise uniquement sa largeur intrinsèque et reste compact. Cette configuration donne une disposition entièrement réactive sans aucun point d'arrêt.

Pitre # 3: ne pas briser l'habitude de marge

→ Utilisez plutôt un écart - il est plus intelligent, plus propre et fait pour Flex.

Dans Divi 4, les lacunes visuelles entre les modules et les autres éléments nécessitaient des marges (lacunes verticales via la marge inférieure, les écarts horizontaux via la marge gauche / droite). Lorsque l'espace a été appliqué à l'espacement des colonnes, Divi 4 avait un paramètre de gouttière, mais il n'a pas pris de valeurs CSS standard, et il a en fait utilisé la marge sur les côtés des colonnes pour créer l'écart. C'est la même chose que les dispositions de bloc fonctionnent toujours. Mais il y a maintenant une approche plus propre et plus efficace.

Le système Flexbox de Divi 5 introduit des commandes d'espace en ligne et verticales sous la conception> Disposition > GAP HORIZONTAL ET VERTICAL . Ces cartes vers CSS GAP et Row-Gap. Les lacunes verticales s'appliquent automatiquement à chaque «ligne flexible» lorsque les articles s'enroulent sur une nouvelle ligne. Il en va de même pour les lacunes horizontales: chaque fois qu'il y a des éléments enfants les uns à côté des autres, l'écart sera présent. Ces paramètres d'espace acceptent également toute unité CSS positive, vous pouvez donc utiliser CLAMP () ou CALC () pour créer des espacements d'écart réactifs.

Cela réduit la nécessité d'appliquer les valeurs de marge à chaque élément enfant. Le réglage de l'espace s'adapte automatiquement en fonction de la direction flexible et du nombre d'enfants dans le conteneur pour appliquer automatiquement les lacunes. Les marges ont toujours leur place, mais leur besoin d'éléments d'espacement à l'intérieur d'un conteneur est réduit.

Piège n ° 4: sous-utilisez les commandes de flux inverse et de commande

→ L'ordre visuel et l'ordre sémantique ne doivent pas correspondre.

Par défaut, les éléments enfants d'un conteneur flexion s'affichent dans leur ordre source. Flexbox et Divi 5 vous donnent la possibilité de spécifier les directions de Flex inverses et les contrôles de commande pour modifier le flux visuel des éléments sans modifier l'ordre HTML des éléments.

La baisse de la direction inverse sous la direction de la disposition vous permet d'inverser l'ordre des éléments dans la ligne de ligne ou de colonne. Pour regarder à nouveau l'exemple de mise en page de Pitfall # 2, nous pouvons voir pourquoi nous voudrions cela. Vous pouvez voir dans la vision des couches que l'ordre des éléments enfants est l'en-tête, puis le diviseur et enfin le module de texte. Sémantiquement, avoir le titre (un H2 dans ce cas) en haut de la pile est logique pour les lecteurs d'écran. Cependant, le titre est suffisamment évident visuellement, qu'il soit premier ou dernier, car nous utilisons une hiérarchie visuelle avec sa taille de texte.

L'utilisation de la ligne inverse car la direction flexible et l'envoi de l'envoi conserve la commande HTML (importante pour l'accessibilité) tout en me permettant de concevoir des choses comment nous les envisageons.

Vous pouvez réaliser la même commande d'élément enfant, qui se trouve dans Divi lorsque vous cliquez sur les paramètres d'un élément enfant> Onglet Contenu> Ordre . Nous pouvons modifier l'ordre dans lequel seul cet élément apparaîtra. Dans cet exemple, nous obtenons le même résultat final, mais avec un cadre différent - celui qui pourrait avoir plus de sens pour certains.

Pitre n ° 5: oubliant de régler le wrap

→ Flex ne s'adressera pas aux nouvelles lignes à moins que vous ne le disiez.

Nous avons mentionné l'emballage plus tôt, mais il mérite sa propre section. De nouveaux conteneurs flexibles par défaut sans enveloppement. Cela peut avoir des conséquences inattendues. Par exemple, si vous ajoutez quatre modules enfants, chacun à 50% de largeur, vous vous attendez à ce qu'ils affichent sur deux lignes Flex. Votre problème est simplement que vous devez permettre à votre conteneur de s'enrouler.

Divi comprend une bascule appelée emballage de mise en page, qui a trois états: pas de courtiseur, enveloppement et enveloppement. Vous devez activer la compensation si vous voulez que les modules se cassent sur de nouvelles lignes à un seuil. C'est ainsi que Divi prend en charge les structures multi-rangs à l'intérieur d'un seul conteneur (les lignes imbriquées ou multiples ne sont pas le seul moyen de le faire maintenant).

Prenez votre temps pour maîtriser Flexbox

Flex dans Divi 5 est plus puissant que le système de mise en page précédent de Divi uniquement. Cependant, cela nécessite un apprentissage pour comprendre. Flexbox n'est pas un paramètre spécifique au divi, il est donc important que vous connaissiez les bases de la fonction de cet outil CSS. Divi permet d'implémenter facilement car tous les paramètres que vous pouvez appliquer dans CSS sont disponibles directement dans l'éditeur. Mais le concept est très différent du bloc.

En raison de ces différences, nous vous recommandons fortement de passer une heure à utiliser un outil d'enseignement interactif pour comprendre Flexbox. Celui qui est facile à utiliser et qui fait vraiment l'affaire est FlexboxFroggy.com. Cela vous fait traverser 24 défis progressivement complexes, vous apprenant toutes les bases. C'est bien mieux que le fait de faire un décollage pendant une heure.

Utilisez Flex avec Divi 5 aujourd'hui

Flexbox dans Divi 5 est honnête. Il ne devine pas ce que vous voulez. Il vous demande de décider. Mais une fois que vous avez décidé, la flexibilité suit. Vous pouvez construire chaque structure de mise en page de manière responsable, réactive et fiable - même infiniment imbriquée - sans CSS ni hacks personnalisés.