Flexbox Space-between with Dynamic List not aligning

Hello, I am having an issue on the Blog page (and Blog template page for that matter) where my dynamic items aren’t aligning properly.

I am using Flexbox to display this content, with “space-between” as the justify value, but there seems to be an issue with the Dynamic Container that is preventing the items from aligning properly.

Anyone else ran into this issue and have a solution? I feel like there’s probably some base CSS that Webflow includes for Dynamic Containers that is throwing things out of wack but I may be wrong…


Here is my public share link: LINK
(how to access public share link)

Hey there Steven,

Let me know if this does the trick. I checked to see if there was any margin, and decided to just re-put the blog-grid-list class on the Dynamic List, and everything went back to the correct position.

Dude, that worked! So strange… Thanks a lot!

1 Like

Hey Brian,

I’m having the same issue again on the “Listings” Collection Template page… I’ve tried the same trick that worked last time and nothing is happening. Would you mind taking a look at it and seeing if it’ll work on your end?

Thanks

Nvm! I found that putting a div wrapper around the content fixed the issue, it’s just when the lists are nested directly into a container that the problem occurs.

1 Like

Glad you were able to fix it.

I keep running into the unwanted white space issue with Flex Boxes set to Justify: Space Between. I don’t think this feature is intuitive… or maybe it’s just broken? Justify Space Between simply does not do what the icon or help text says it should.

Expected behavior:
image

Actual, every time:

It’s a bug that’s been posted about for over two years on the forums related to Flex Boxes interacting with Symbols or Dynamic Lists.

For anyone searching for a solution, one trick is to select the left-most child element and set it to Order: First and set the right-most child element to Order: Last. This solution works for navbars placed inside Symbols, but I am unsure about Dynamic Lists. Another solution is the one discussed in this thread above.

This issue happened to me too, but I think I found the solution. Change layout to full width, then the alignment can go the way I want.