Streaming live at 10am (PST)

Flex 'Justify: Space Between' Causing items on other row to break

Hi there,

We’re working on a cruise website and on our destinations pages, we’ve got a section for cruises going to that destination. I’ve set this up with a CMS list with 4 items at 32% width, flexed to justify space between.

It looks great on the top line but on the bottom line if there’s not 4 items it flexes the items to the left and right and leaves a large space between, is there any way to avoid this when there are less than for items in a row?

I know there are other ways but they seem to take the content away from the edge and when we have other content we want in line with this section in doesn’t look great.

I’ve also attached an image

Thanks in advance!

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

Do you need to have 4 items on the row?

You could change the basis of the destination item to 30% which puts 3 items per row and increase the image size to 200px height and it looks good.

I’m no expert, so if it’s definitely got to be 4 items per row then I can’t help! :grimacing:

Thanks for the suggestion, unfortunately we’ve already tried that and with the way the rest of the site is laid out it just doesn’t work :frowning:

No worries, I was just going to add that if you added another 2 Cruises you may still have the same issue anyway :face_with_raised_eyebrow:

There will be someone here who can help no doubt! Beautiful site anyway… I want to go on holiday now! :confounded:

1 Like

I appreciate it mate! and me too haha :joy:

1 Like

I can’t find the page your screenshot is showing within your project.

How do you want the items to appear on the second row? In this particular example, do you want items 5 & 6 to be centered under items 1 & 2, and 3 & 4, respectively?

Sorry my bad forgot to give a link to that specific page, I want to achieve the same style as I would if I aligned it to the right and added margin, but I need it to flow with the content so it needs to be aligned left and right with margin in the middle. But when there are less than 4 items on the next row they should start at the 1st item and continue like the top row if that makes sense?

here’s the link to the specific section:

It needs to look like this but without the margin on the right of the container

I’m at it again! Does it have to be bang on flush to the container on both sides? If your basis is 24% then there is going to have to be a gap somewhere as that leaves 1% unaccounted for…

I may still be barking up the wrong tree…

I managed it like this…

Managed to fix it! I’ll tell you how because it’s really useful to know, Basically I lowered the basis to 23%, aligned the flex to left, added a 2% right margin, added a -2% right margin to the collection list and then boom!

Not the best fix but it works!

1 Like

Ahhh flexbox… You will still continue to completely blow my mind forever! :joy::joy::joy:

Glad you sorted it :+1:t2: See you on the cruise!

This topic was automatically closed 125 days after the last reply. New replies are no longer allowed.