Streaming live at 10am (PST)

Flex box not really working with CMS items?


#1

Hi there,

I am trying to flex align (justify: space between) three logos pulled from a collection list.
I applied the flexbox properties onto the collection list, hopping the collection items would align accordingly. It appears it doesn’t really work, it seems like the collection items always keep the same even width, despite the different logo width inside them.

Any advice ?

I am probably doing something wrong, eventhoug I used flexbox before.
here is the readonly link to my project:

https://preview.webflow.com/preview/tlhsierrecmspreview?preview=a22488e5342eeb8827e1b39b64181852

Find attached some screenshots :slight_smile:


Here is my site Read-Only: LINK
(how to share your site Read-Only link)


#3

also remove this from your logo style (no meaning + could create bugs)

margin-right: auto;
margin-left: auto;

http://learnlayout.com/margin-auto.html


#4

On the flex child “Collection Item 2” set the item to Don’t Shrink instead of Shrink. This way each collection item will not adjust its size and the flex container or your list can properly calculate the space around layout.

That should do the trick.


#5

Hi there,

Thank you all for your answers and informational links, highly appreciate !
I tried to adjust the settings as advised, but the logo images still remain centered in their respective collection items.

I guess what I’d like to achieve, is to have the left logo align its very border to the very left and the right logo align its border to the very right while having the center logo aligned, well in the center :slight_smile:


#6

Hi @anthonysalamin

It looks like you have a float interfering with the flexbox style. Here is a quick video showing how to resolve this: https://cl.ly/0W0V3d0H3H3J

Hope this helps!


#7

Ho my god, thank you so much for having taken the time to make a little video !
It is now pixel perfect aligned, like I wanted !

Cheers !