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.
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.
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.
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.
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:
As @vincent suggested, just throw an extra div inside your Container, and apply flex to that
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: