Space between Flex Box is not working

Hi,

I have Flex box Justify: space between, but its not working. Can someone please have a look in tablet view-port?

Thank you. :slight_smile:

Here is my site Read-Only: https://preview.webflow.com/preview/offshore-marine-lubricants?utm_medium=preview_link&utm_source=designer&utm_content=offshore-marine-lubricants&preview=24f9cb1deef2cd5b769d4f5dcfd763f5&mode=preview
(how to share your site Read-Only link)

Flexbox space between option is bugging in Webflow when the flex element is the Webflow Navbar or a Webflow Container. Bug exists since the launch of flexbox.

If you add a div in the navbar element, then put everything inside of this div, make the div width 100%, and make it flex+in between, it will work.

9 Likes

Merci, @vincent. Ça marche maintenant. :slightly_smiling_face:

1 Like

@vincent There is a new problem now.

The nav-bar moved a few pixels up. I don’t know why. There’s no margin or padding applied either.

That is expected actually. If you can enlarge your screen a bit you’ll see that your search field is forced under the rest, which is making everything go up because there’s a fixed height involved somewhere up.

So the solution is a design solution: either you make your content fit within the smallest possible viewport for the desktop view, or you address the 2 lines of elements situation with a variable height for the parents.

http://vincent.polenordstudio.fr/snap/1979awq.mp4

This is the live site. Nothing moves up and elements seamlessly wrap. Check it out: https://www.om-lubes.co.uk/

But in the designer, after I added the div or some link-blocks for the tablet and mobile. The elements have mysteriously moved-up. See logo, for example.

No element in the nav-bar has a fixed height.

The problem is something else.

Hoping Webflow fixes this regularly occurring bug.

2 Likes

Facepalm. So glad there was a workaround. This is embarrassing, Webflow!

1 Like

Oh my word this was really annoying. Thank you for the fix. Hopefully the fix is unnecessary in the future.

1 Like

There is still a bug, I’ve just tested myself by creating simple nav using vscode HTML CSS and then comparing to webflow, when you apply space-between it’s not going to move elements to the edge of the container, it’s going to have that weird huge space on the left and right. Webflow fix the bug.

This is still broken!! So frustrating

Howdy all. Quick note that the Webflow Container element is a “non-ordinary” node, which means it has :before and :after pseudo elements inside. These also get counted when the user applies flex settings. (Same for the Navbar container.) In other words, this is expected behavior and not a bug.

You have two options to fix:

  1. As @vincent suggested, just throw an extra div inside your Container, and apply flex to that
  2. For the children inside the Container, you can apply First and Last to the corresponding children, and this will remove the extra unnecessary space on either side of those elements. See included image below:

Screen Shot 2022-02-08 at 11.12.33 AM

2 Likes

This is the solution. Thank you! It is quite ridiculous how this bug still exists years and years later.

Yes, just lost one hour. :rage:
Thank for the tips !

Thank you for your explanation! You said it has :before and :after, why don’t I see it in CSS?