Streaming live at 10am (PST)

Flexbox Alignment Error


Having trouble getting items in a dynamic list to align correctly when using Flexbox and wrapping the children. Only the top row isn't aligning when I choose "Justify: Space Around" or "Justify: Space Between". I've attached a screenshot of the problem, and my read only link is below. This is specifically on the page titled "Blog" at

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


Under class "Recent Post Item" then changing the flex order to Order-First fixed this for me?


Thanks @Matty, that did the trick!

Separate question, the Recent Post Item has rounded corners (4px), and overflow is set to hidden, but when I hover over the link, the resulting interaction seems to remove the rounded corners on the top right and left. Any idea why?



Your welcome :slight_smile:

Under "Recent Post Item" class set the z-index to 2000

Happy new year :slight_smile:


Hey @Matty! Another question related to this. For some reason the second row isn't aligning like the first, since there are only 5 items in the collection and not 6. I've included a screenshot and link below. Any idea why this is happening? It's on the page titled "Blog".

Preview Link

Page Link


Hi @jordanshotwell

You could try the following;

"Recent post list" then center the element.

Then go to "Recent Post Item" Then give it a left margin to separate the blocks

I'm still getting my head around Flexbox so someone else might have a better solution :slight_smile: