Consistent Spacing using Flex Wrappers in Webflow
There is this thing in web development that I’ve always felt was a bit unnecessary complicated to get right — consistent spacing between elements.
The problem
Imagine you’re developing this simple title component. It contains a heading, a description paragraph and a couple buttons in a horizontal row.
Now, how would you develop this component?
I would assume that a common solution would be to give the heading a bottom margin, the paragraph a bottom margin and the buttons placed in a div with a right & left margin respectively.
While this could be a fully functional solution, what would you do when developing the following secondary title component in the same project?
As you can see, the elements themselves stay exactly the same, but the spacing between them have changed and become smaller.
One solution would be to use additional combo-classes for each element, decrease the margins and you’re finished. However, what would you do if you have 25 other title components to develop? If you decide to use this solution, your projects will end up with hundreds and hundreds of classes for every new type of spacing you need.
The solution
My absolute favorite solution for this problem is…..flex wrappers.
These are utility classes for div blocks that wraps child elements and decides the spacing between them using horizontal or vertical flex gap.
It’s a bit hard to visualize this way, but in the image above you can see that:
- The whole component is wrapped in a div with a vertical flex gap.
- The heading & paragraph is wrapped in a div with a smaller vertical flex gap.
- Two buttons that are wrapped in a div with a horizontal flex gap.
We can also take a look at the secondary title component.
It setup in the exact same way, except for using wrappers with smaller flex gaps. All the elements are spaced out, but none of the elements has ANY margin set. The parent decides the spacing between its children.
The system
I always setup a system of flex wrapper classes. Ever since Webflow introduced the V & H Flex elements, this has been even simpler to do.
The system usually looks something like this:
- Vertical Flex 2XS — 2XL (0.25 REM — 10 REM)
- Horizontal Flex 2XS — 2XL (0.25 REM — 10 REM)
The naming of these classes can be anything, but I just name them V Flex and H Flex. This type of spacing system has worked well so far.
Conclusion
Hopefully this guide helped you out in your quest to spacing perfection. If you have any questions, feel free to comment down below or hit me up through my website.
