Controlling the gap in a flex layout

Question

Hello 🙂
J'ai une petite question concernant le gap quand on est en Flex.
Imaginons j'ai 6 élements et je met un Gap de 45px, le gap que je voudrais mettre c'est entre chaque element.
Or à chaque fois que je met un gap, il se met aussi avant le premier élément. Ce qui fait que j'ai toujours cette marge avant mon premier élement.
Qu'est ce que je fais mal ?

Théo ROLAND · Accepted Answer

C’est là encore potentiellement lié à un bug de Webflow. Tu utilises un élément Container, je t’invite plutôt à prendre une Div et recréer ton container comme tu le souhaites 😉

Benoît · Answer

Hello, c’est un bug de Webflow. Refresh ta page et ce sera bon je pense 😉

Nicolas Wache · Answer

Alors en effet un simple refresh à fait rétablir le premier probleme que j'avais.
Pas contre, sur la capture ici, je veux mettre le gap entre les deux div, et j'ai quand meme le gap a gauche et à droite 😕

Nicolas Wache · Answer

Ah oui en effet. merci beaucoup 🙂
En fait j'avais l'impression que la structure etait toujours Section / Container / Div/

Mais la dans ma structurer, j'aurais du remplacer mon container par une div ? Ou ajouter une div juste aprés mon container ?

Théo ROLAND · Answer

Là, tu es au début de la formation donc tu n’as pas encore vu Client First.
À ce stade, la structure conseillée est effectivement :

Section (élément Section)

Container (élément Div)

Layout (élément Div)

…

J’ai précisé ci-dessus les éléments que je recommande d’utiliser.
J’évite d’utiliser les éléments pré-configurés par Webflow tels que les Containers, H-Flex, V-Flex, etc…. Ils ont parfois des propriétés appliqués qui sont invisibles dans Webflow. Tu vas avoir l’impression de te battre contre un bug, alors que c’est une configuration cachée à laquelle tu n’as pas accès.

Tu peux utiliser des Divs et définir dans les paramètres (Settings dans le panneau de droite) le type d’éléments : Section, Main, Nav, Aside, etc…

Nicolas Wache · Answer

Ah oui je vois. En fait le container je pensais à un element container mais finalement c'est une div que l'on nomme container. Je comprends mieux, et en effet ça résout le bug sur lequel je bataille depuis un moment ^^
Bien plus clair pour moi en tout cas. Merci beaucoup à vous deux

Valentin Geffroy · Answer

Pour info, le “bug” vient du fait que tu as des ::before et des ::after qui se créent dans certains éléments Webflow 🙂 C’est du css. Ça se corrige mais c’est déroutant que début

Nicolas Wache · Answer

Ah oui c’est ce que j’avais lu sur le net mais je saisissais pas d’où ça venait.
Et outre ça , ça serait quoi l’intérêt de mettre un réel container plutôt qu’une div nomee container ? Simplement pour le referencement ?

Théo ROLAND · Answer

Un gain de temps de 5 secondes

Théo ROLAND · Answer

Aucun impact sur le référencement, c’est simplement un élément pré-stylisé

Théo ROLAND · Answer

Selon McGuire (traduits) : Un Container est un bloc div qui possède déjà des propriétés prédéfinies - vous pouvez l’insérer directement dans une page ou une section sans avoir à configurer manuellement son style. Tout comme de nombreux éléments/composants du panneau d’ajout, vous pouvez créer un Container à partir de zéro en stylisant un bloc div - un Container peut vous faire gagner du temps.

Bonus : Il peut y avoir des comportements annexes inexplicables. Je recommande de ne pas les utiliser.

Nicolas Wache · Answer

Ah oui donc un gain de temps qui m’a coûté 1h à chercher une solution avant d’arriver à vous 😂 😂  Meilleure méthode pour ne plus jamais les utiliser !

initClub · 1ère Communauté Webflow Francophone

Controlling the gap in a flex layout