Streaming live at 10am (PST)

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.

1 Like

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