initClub · 1Úre Communauté Webflow Francophone

Updated last month

Controlling the gap in a flex layout

At a glance

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 ?

Marked as solution

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 😉

View full solution
1
B
N
T
12 comments

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

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 😕

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 😉

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 ?

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


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

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

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 ?

Un gain de temps de 5 secondes

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

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.

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 !

Add a reply
Sign up and join the conversation on Slack