Streaming live at 10am (PST)

Space between Flex Box is not working


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:
(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.


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.

This is the live site. Nothing moves up and elements seamlessly wrap. Check it out:

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.


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.