Un guide pour débutant sur les propriétés Flexbox CSS

Une bonne mise en page commence par un modèle clair pour l'alignement et l'espacement. Flexbox fournit ce modèle en organisant le contenu le long d'un seul axe avec un contrôle prévisible sur la direction, l'alignement, l'emballage et l'espace.

Ce poste couvre les bases de ces propriétés CSS et comment elles fonctionnent ensemble. Après les principes fondamentaux, nous montrons comment la même approche est mise en œuvre visuellement dans Divi 5 en utilisant le système de mise en page Flexbox. Allons-y!

Qu'est-ce que CSS Flexbox?

Le trafic mobile dépasse la conception de sites Web de bureau. Les développeurs avaient besoin de dispositions qui fonctionnent sur les téléphones, les tablettes et les ordinateurs de bureau. Les anciennes méthodes ont souvent échoué.

Flexbox a corrigé ceci. CSS Flexbox fait que les éléments s'adaptent. Ajouter l'affichage: flexion à un conteneur et ses enfants directs deviennent flexibles. Ils peuvent grandir, rétrécir ou rester fixes en fonction de l'espace.

Flexbox pose des éléments en ligne droite, soit des lignes de gauche à droite ou des colonnes de haut en bas. Vous choisissez la direction.

Le conteneur contrôle la disposition. Vous définissez la façon dont les éléments s'alignent et l'espace, tels que la propagation uniformément, centrée ou empilée. La propriété GAP ajoute un espace cohérent entre les éléments sans marges ou rembourrage supplémentaires. Les techniques plus anciennes nécessitaient des mathématiques à marge délicate et se cassaient souvent.

La méthode traditionnelle fait des choix d'espacement aléatoire: 10px ici, 20px là-bas, 40px ailleurs. Ces valeurs dispersées provoquent des incohérences et rendent difficile de savoir quel espacement s'applique. Les propriétés de l'espace suppriment les conjectures en utilisant une règle cohérente pour tous les éléments.

Un guide rapide de Flexbox et de ses propriétés

Flexbox se divise en deux camps: Propriétés pour les conteneurs et les propriétés des articles. Les propriétés des conteneurs affectent l'ensemble du groupe, tandis que les propriétés des éléments vous permettent de modifier les éléments individuels. La plupart des dispositions ont besoin d'une poignée de ces propriétés, telles que:

Affichage: flexion

Transformez n'importe quel élément en un conteneur flexible en ajoutant l'affichage: flex. Ses enfants directs deviennent des objets flexibles. Les éléments s'alignent dans une ligne par défaut au lieu d'empiler comme des éléments de bloc standard. Vos maux de tête d'espacement disparaissent car les éléments flexibles suivent des règles différentes des éléments ordinaires. Le conteneur contrôle désormais comment ses enfants (ou objets) se comportent, et vous obtenez des résultats prévisibles au lieu des surprises CSS habituelles.

direction flexible

Choisissez la direction des éléments. Utilisez une ligne pour la disposition de gauche à droite.

et une colonne pour empiler les éléments verticalement.

Ajoutez à l'envers à l'un ou l'autre et les éléments retournent complètement leur commande.

Ce choix définit votre axe central, ce qui affecte le fonctionnement des autres propriétés.

Le passage de la ligne à la colonne modifie la façon dont Justify-Centante et Align-Items se comportent, de sorte que la direction vient en premier dans votre planification.

justifier

Cette propriété distribue des restes d'espace le long de votre axe central. Les articles prennent ce dont ils ont besoin, puis cette propriété gère le reste. Utilisez Flex-Start pour tout grouper au début, centre pour regrouper les éléments au milieu et Flex-End pour tout mettre vers la fin. Dans le même temps, l'espace-intermédiaire est utilisé pour répandre les articles séparés avec des lacunes égales. La valeur de l'espace donne à chaque élément un espace égal des deux côtés, tandis que l'espace crée même des lacunes identiques partout.

align-items

Il gère l'alignement sur l'axe transversal. Pour les dispositions horizontales, cela signifie un alignement vertical. Pour les dispositions verticales, il contrôle le positionnement horizontal. Il prend en charge des valeurs comme Flex-Start, Center, Flex-End, Stretch et Baseline (pas les valeurs spatiales *). Réglez-le au centre et les éléments s'alignent sur le milieu, quel que soit leur sommet. La valeur par défaut est extensible: les éléments s'étendent pour remplir la taille transversale du conteneur. Si la taille transversale du conteneur est automatique, elle équivaut souvent à l'élément le plus haut, de sorte que les éléments semblent égaux en hauteur.

se dérober à la flexion

Décide ce qui se passe lorsque les articles sont à court de pièce. La valeur par défaut NowRAP garde tout sur une seule ligne en rétrécissant les articles. Passez à envelopper et les éléments qui ne s'adaptent pas aux nouvelles lignes tout en conservant leurs tailles préférées. Vous pouvez également inverser la direction d'emballage. Envelopper transforme votre ligne unique en plusieurs lignes, créant des dispositions qui ressemblent aux grilles.

écart

Il ajoute de l'espace entre les éléments sans gâcher avec les marges. Set Gap: 20px, et chaque élément obtient un espacement cohérent. Vous pouvez définir différentes lacunes horizontales et verticales si nécessaire. L'espace n'apparaît que entre les articles, pas sur les bords. Cela bat des marges de calcul qui se cassent lorsque vous changez de disposition plus tard.

Ces propriétés fonctionnent bien une fois que vous les avez compris. La partie délicate est de se souvenir de ce que chacun fait et de taper tout ce CSS. Vous écrivez du code, actualisez votre navigateur, voyez que ce n'est pas tout à fait correct, puis revenez en arrière et ajustez. Les constructeurs visuels comme Divi retournent ceci en vous permettant de cliquer sur les boutons au lieu de taper les noms de propriétés.

Divi 5 rend Flexbox Visual

Comme nous l'avons établi, l'apprentissage de Flexbox est une chose; Se souvenir de ce qui est un contenu justifier: l'espace-intermédiaire en est un autre. Vous passez plus de temps à taper des propriétés que la conception. Au lieu d'écrire CSS, vous utilisez des boutons et des curseurs qui montrent exactement ce que fait chaque option dans le constructeur Divi. Divi 5 apporte cela à Flexbox, transformant les concepts abstraits en commandes simples et cliquables.

Avant de plonger plus profondément, regardons brièvement ce qu'est Divi.

Qu'est-ce que Divi?

Divi est un constructeur de sites Web qui fait fonctionner WordPress pour les personnes qui veulent de beaux sites sans tracas.

Vous pouvez faire glisser plus de 200 modules autour de votre page et modifier le texte où il se trouve. Choisissez des couleurs et regardez-les apparaître instantanément pendant que vous travaillez sur le vrai site, pas un aperçu qui pourrait vous mentir plus tard.

Le thème comprend plus de 2000 mises en page pour les restaurants, les photographes, les consultants et d'autres entreprises, vous pouvez donc en trouver un que vous aimez et le modifier jusqu'à ce qu'il fonctionne parfaitement pour vos besoins.

Le constructeur de thèmes vous donne le contrôle de chaque partie de votre site. Vous pouvez concevoir des en-têtes qui se démarquent au lieu de ressembler à ceux de tout le monde, de créer des pages de blog que les gens veulent lire, et même de rendre vos 404 pages suffisamment intéressantes pour que les visiteurs restent au lieu de partir.

Divi Ai vous aide à construire rapidement

Une fois, faire des thèmes et des modèles signifiait jongler avec différentes applications pour la copie, les images et les idées de conception. Divi Ai rassemble tout ce dont vous avez besoin dans une seule interface unifiée: là où vous créez vos sites Web.

Dites-le que vous avez besoin de texte et il l'écrit.

Demandez des images personnalisées, et cela les crée. Vous pouvez même décrire les modifications photo et la regarder apporter les modifications.

De plus, il gère le code et construit de nouvelles sections lorsque vous demandez.

Les sites Divi Quick vous évitent de regarder une page vierge sans savoir par où commencer. Vous pouvez choisir parmi les sites de démarrage que notre équipe a conçus, avec des images originales et des illustrations qui ont l'air bien.

Vous pouvez également décrire votre entreprise pour diviser les sites rapides et le laisser construire quelque chose à partir de zéro en utilisant l'IA. Ces sites construits sur l'IA sont livrés avec de vrais titres, une copie et des images correspondant à votre description.

Générez tout avec l'IA, prenez des photos de UNSPLASH ou laissez tomber dans les espaces réservés pour vos images. Réglez d'abord vos polices et vos couleurs, puis laissez l'IA contourner vos choix de marque tout en gardant tout modifiable par la suite.

Divi 5: le constructeur de sites Web à l'épreuve du futur

Divi 5 reconstruit l'ensemble du cadre à partir de zéro.

Le constructeur visuel s'exécute plus fluide, les pages rendent plus rapidement et la base de code peut prendre en charge plus efficacement les normes Web modernes. Vous obtenez un balisage plus propre, de meilleures performances et une fondation prête pour le présent et l'avenir.

L'interface est également rationalisée. Les paramètres apparaissent plus logiquement organisés et les tâches quotidiennes nécessitent moins de clics. L'expérience globale semble plus réactive, peu importe si vous construisez des pages simples ou des dispositions complexes.

Vous obtenez la même approche de construction visuelle que vous connaissez, juste avec une base beaucoup plus forte en dessous.

Quoi de neuf dans Divi 5

La nouvelle architecture ouvre des portes pour des fonctionnalités qui n'étaient pas possibles auparavant. Ces 18+ ajouts modifient la façon dont vous créez et gérez les sites Web.

Voici un exemple de ce que vous obtenez:

• Système de mise en page Flexbox: commandes visuelles pour l'alignement, l'espacement et le positionnement. Les éléments peuvent augmenter, rétrécir ou envelopper automatiquement de nouvelles lignes. Fonctionne avec des lignes imbriquées et des groupes de modules pour des dispositions complexes sans code.
• Rangs imbriqués: Mettez les rangées à l'intérieur d'autres rangées avec une nidification infinie. Créez des structures de mise en page complexes sans solution de contournement de code.
• 17 Modules WooCommerce: constructeurs de pages de produits complets, y compris la galerie de produits, ajouter au panier, les avis, les notes, les avis de stock, la chapelure, les méta-produits, les ventes ascendantes, etc. MODULES DE CARTE ET DE COSE À L'ÉTABLISATION BORD.
• Système d'interactions: créez des fenêtres contextuelles, des bascules, des animations de défilement, des effets de mouvement de souris et des déclencheurs de la fenêtre. Mélanger plusieurs déclencheurs pour des comportements complexes comme les bannières promotionnelles qui s'estompent après le défilement.
• Éditeur réactif: vous permet de visualiser, d'éditer et de réinitialiser des états de survol et d'autant réactifs pour tout paramètre simultanément sans changer de modes de vue pour une édition plus rapide, plus précise et moins encombrée.>
• Loop Builder: Créer un contenu dynamique qui tire de votre base de données. Créez des dispositions de publication personnalisées, des grilles de produit et des sections répétitives. Fonctionne avec WooCommerce Products.
• Presets de groupe d'options: Créez des styles réutilisables pour la typographie, les bordures, les ombres et les arrière-plans. Appliquez-les sur n'importe quel élément compatible, pas seulement des modules uniques.
• Variables de conception: définissez des valeurs globales pour les couleurs, les polices, l'espacement, les nombres, les images et le texte. Changez votre couleur primaire une fois et il mettra à jour partout automatiquement.
• Unités CSS avancées: utilisez des fonctions CLAMP (), CALC (), Min () et Max () via des contrôles visuels. Aucun code requis pour la typographie réactive et les calculs d'espacement.
• Couleurs relatives et HSL: Créez des systèmes de couleurs mathématiquement magnifiques. Créez des variations de couleur qui maintiennent automatiquement l'harmonie lorsque la couleur de base est modifiée.

Et plus arrive! Notre équipe de développement continue d'ajouter des fonctionnalités ~ toutes les deux semaines alors qu'elles se préparent pour la libération bêta publique.

Un aperçu rapide de la configuration Flexbox de Divi 5

L'approche visuelle de Divi 5 supprime la conjecture de l'implémentation de Flexbox. Au lieu de mémoriser les noms de propriétés et de taper CSS, vous obtenez des boutons et des curseurs qui montrent exactement ce que fait chaque contrôle. Jetez un œil à sa facilité.

1. Configuration de votre première ligne Flex

Commencez par choisir votre structure de ligne dans la sélection étendue du modèle. Divi 5 propose de nombreuses autres options de mise en page, y compris des colonnes égales, des grilles multi-rangs et des configurations multi-colonnes.

Les nouvelles sections de Divi 5 commencent automatiquement avec Flexbox. Lorsque vous ajoutez une nouvelle rangée, il est prêt avec les propriétés flexibles activées. Mais si vous travaillez avec des sections existantes à partir des anciennes versions Divi, vous devrez les basculer manuellement de la disposition de bloc par défaut pour flexion en cliquant sur l'icône des paramètres de votre ligne, en naviguant vers l'onglet Design> Disposition et en modifiant le «bloc» en «flexion».

2. Comprendre la direction, le flux, l'alignement

Votre champ de direction de disposition détermine où les éléments se retrouvent. La ligne est le paramètre par défaut, ce qui fait que les éléments se sont alignés horizontalement.

Passez à la colonne et les éléments empilent les éléments verticalement comme les dispositions Web régulières.

Les deux options sont livrées avec des versions inverses qui retournent complètement l'ordre.

En attendant, Justify Content décide de ce qui se passe avec l'espace restant le long de votre axe principal. Pour les lignes, le démarrage signifie à gauche, les centres du milieu horizontalement et la fin s'aligne à droite.

Pour les colonnes, démarrer signifie le haut, les centres du milieu, et la fin pousse les éléments vers le bas.

Au-delà de l'alignement standard de démarrage, de centre et de fin, vous avez également un espace entre les articles écartés avec des lacunes égales, parfaits pour les menus de navigation ou les dispositions de cartes.

L'espace autour donne à chaque élément de la respiration égale des deux côtés, ce qui est utile lorsque vous voulez des marges cohérentes. Et, l'espace crée uniformément des lacunes identiques partout, idéal pour l'espacement visuel équilibré.

Aligner les éléments fonctionne perpendiculairement à votre direction d'écoulement. Si vous choisissez la disposition des lignes, cela contrôle le positionnement vertical des éléments.

Si vous avez choisi la disposition de la colonne, il gère l'alignement horizontal.

Le centre maintient tout aligné au milieu, le début positionne les éléments au bord de début, l'extrémité les pousse au bord éloigné, et l'étirement fait remplir l'espace disponible.

Ces commandes résolvent les maux de tête communs sans calculs CSS personnalisés.

3. Espacer les choses avec des contrôles d'écart

Les commandes d'espace ajoutent de l'espace entre les éléments flexibles dans votre conteneur: colonnes, modules et tout type de type de contenu fonctionne. Les lacunes créent une salle de respiration sans rembourrage désordonné ni mathématiques de marge. L'écart n'apparaît que entre les éléments, pas autour des bords extérieurs.

Réglez votre espace horizontal sur 20px, et chaque colonne aura cet espacement exact.

Changez l'écart vertical en 20px et toutes les lacunes se mettront à jour instantanément.

Divi 5 prend en charge les unités CSS avancées comme les longueurs et les pourcentages de la fenêtre. Vous pouvez utiliser CLAMP () pour des lacunes réactives qui évoluent entre les tailles d'écran. La fonction calc (), qui combine des unités comme CALC (2REM + 10PX), est également prise en charge.

Les commandes d'espace ici prennent également en charge les variables de conception. Ajoutez une variable numérique appelée «GAP HORIZONTAL COLONNE» avec la pince (16px, 2vw, 32px) comme valeur. Appliquez cette variable aux contrôles GAP sur votre site.

Lorsque vous voulez un espacement plus serré plus tard, modifiez la variable; Chaque écart se mettra à jour instantanément.

4. Contrôler comment les articles enveloppent

Contrôle de l'emballage de disposition ce qui se passe lorsque les éléments sont à court d'espace horizontal. Le paramètre par défaut sans enveloppe garde tout sur une seule ligne en rétrécissant les articles pour s'adapter au conteneur. Passez à envelopper et les articles qui ne correspondent pas aux nouvelles lignes tout en conservant leurs tailles naturelles.

Enrouler le revers fait la même chose que la pellicule ordinaire, mais retourne la direction. De nouvelles lignes apparaissent au-dessus des précédentes au lieu de ci-dessous.

Cela vous donne un contrôle sur la hiérarchie visuelle lorsque les éléments débordent. Le comportement d'emballage reste cohérent sur différentes tailles d'écran, de sorte que votre mise en page s'adapte de manière prévisible du bureau au mobile sans se casser.

Divi 5 vous donne également des contrôles d'alignement d'emballage. Cette fonction apparaît automatiquement lorsque vous permettez un emballage flexible et des formulaires multiples. Lorsque la direction est réglée sur Row, l'alignement d'emballage est disponible pour l'alignement vertical.

De même, pour la direction de la colonne, les options sont destinées à l'alignement horizontal.

L'étirement fait que toutes les lignes s'étendent pour remplir l'espace vertical disponible. Commencez des grappes de lignes au début, des grappes centrales au milieu et terminez en les poussant vers le bord opposé.

L'espace entre les lignes écarte des lignes avec des espaces égaux, l'espace autour donne à chaque ligne une salle de respiration égale des deux côtés et l'espace crée uniformément des lacunes identiques entre toutes les lignes.

Cela fonctionne très bien pour les dispositions de cartes, les galeries d'images ou tout contenu qui doit circuler naturellement sur plusieurs lignes. Les éléments maintiennent leurs proportions et leur espacement tout en réorganisant en fonction de la largeur disponible. Vous obtenez des pauses propres sans que les articles ne soient écrasés sur de petits écrans.

5. Travailler sur différentes tailles d'écran

Les sept points d'arrêt de Divi 5 vous donnent un contrôle granulaire sur la façon dont vos dispositions s'adaptent.

Chaque point d'arrêt fonctionne indépendamment, afin que vous puissiez basculer votre direction de disposition à la colonne sur mobile pendant que votre disposition de ligne de bureau reste intacte. Vous pouvez tout centrer sur les téléphones, mais gardez cet espace entre l'alignement sur les écrans plus grands.

Votre configuration à trois colonnes de bureau peut devenir une pile à une seule colonne sur mobile sans affecter les points de rupture du milieu. Chaque taille d'écran obtient exactement ce qui fonctionne le mieux pour cette expérience de vision.

Le nouvel éditeur réactif rend ce processus beaucoup plus fluide. Cliquez sur l'icône Responsive Editor à côté de tout paramètre pour afficher et modifier les valeurs pour toutes les tailles d'écran à la fois.

Cependant, si vous utilisez des valeurs clamp () pour écarter vos lignes et colonnes, cela évoluerait automatiquement entre les points d'arrêt sans nécessiter de changements manuels.

6. Création de préréglages de groupe d'options

Après avoir fait fonctionner votre disposition Flexbox comme vous le souhaitez, vous pouvez enregistrer ces paramètres en tant que préréglage du groupe d'options en cliquant sur l'option de préréglage du groupe d'options et en l'étiquetant bien.

Vos valeurs d'écart, vos choix d'alignement et vos paramètres de WRAP sont regroupés. Lorsque vous cliquez sur Enregistrer, cette configuration de mise en page exacte devient réutilisable sur votre site. Lorsque vous souhaitez utiliser le préréglage enregistré, cliquez sur l'icône Preset sur la nouvelle ligne et sélectionnez le préréglage que vous venez d'enregistrer.

Le préréglage garde vos unités avancées intactes. Votre espacement réactif transfère avec tous les calculs que vous avez mis en place, et les modifications ont même été apportées sur différents points d'arrêt.

Commencez avec Flexbox de Divi 5 aujourd'hui

Flexbox élimine la marge et les mathématiques de rembourrage qui se brisent lorsque vous modifiez les dispositions. Vous arrêtez de jouer avec une conception réactive avec les requêtes multimédias et les sections personnalisées.

Divi 5 transforme ces propriétés CSS abstraites en contrôles visuels. Vous pouvez cliquer sur les boutons pour définir la direction, faire glisser les curseurs pour ajuster les lacunes et les activer et les éteindre. L'éditeur réactif gère les sept points d'arrêt d'un panneau, vous voyez donc les résultats instantanément au lieu de deviner le code.

Économisez des combinaisons réussies en tant que préréglages et réutilisez-les n'importe où. Vous passez du temps à concevoir au lieu de déboguer la syntaxe CSS.