Flex Items help

[Ashley_Janelle]

Can anyone show me how I can add space between these items on my home page?

---

Here is my site Read-Only: https://preview.webflow.com/preview/blog-1-324f36?utm_source=blog-1-324f36&preview=eb5ad576e3e11f04021f19204b042860

[dram (Alex Dram)]

Dunno what space you mean exactly but I think you will figure it out once you understand this one thing: flex only affects direct children. In your case you put your images into a div which itself is affected by its parent (Section 15) flex but obviously is not going to be spread out by justify: space between since it is treated as a single element.

In other words either give your div in the section 15 flex parameters and then use it to spread the inner elements or just get your inner elements (images) out of this div and place them into the section 15 itself which has flex property.

[knk (Keiran)]

Hi @Ashley_Janelle

Further to Dram’s comments, I see that you have placed your images inside Div Block 35. You can treat this element as a ‘wrapper’ for your images.

Change the element settings for ‘Div Block 35’ as follows:
Flex Item - Expand
Display - Flex
Flex Layout - Justify: Space Around

This should give you the desired visual look you are after.

Using a wrapper for the images allows you to change the Flex direction for the images for different viewport - namely mobile portrait.

Hope that helps.
Regards,
Keiran

Image showing the settings: