educative.io

At times, when Justify-content property is set to Space-between or Space-around, it doesn't give us that space between the flex children

setting the flex container to "justify-content: space-between || space-around; " sometimes doesn’t add the space between or around the elements (Specifically when working with images).

I have added margin to get the space between the elements.

Hi @Camy_Chhetri
Thanks for reaching out to us. justify-content only works when there is still space after your flex items have flexed to fill it. If there is no available space, justify-content will have no effect. For example: if all of your flexible items (flex: none or flex: 0 0 auto) are non-flexible and smaller than the container or if the maximum width for each of your flexible items prevents it from expanding to fill the entire empty space.
You can also inspect and check if the justify-content property is being applied on a particular element or its been overridden by another property.
I hope it helps. Happy Learning :slight_smile: