CODEWITHSUNDEEP
cssflexbox
Willzorrr
Willzorrr

Reputation: 13

How to add spacing between images in flexbox

I'm fairly new to flexbox and i have been following an online course produced by Dev Ed. I have a basic understanding on each flexbox property.

I'm trying to add spacing between each image in the 'sub-featured' section of my layout. I've tried to add justify-content: space-between but that doesn't seem to work. Could it be because i've set the width of the images to take up 100%? If so how would i fix this and keep the images responsive?

*** EDIT ****

Sorry i forgot to add the codepen: https://codepen.io/willzorrr/pen/yLeJvaV

Upvotes: 1

Views: 2873

Answers (2)

Stackerexp
Stackerexp

Reputation: 537

You could add a margin to each of the elements in the flex container. in your case:

.articles-row li{
   margin:0 2rem;
}

Or, if you want only the images to have spacing (and not the text):

.article-img-small{
   margin:0 2rem;
}

Edit:

Since you requested the first and last element to still be in line with the bigger image:

We just have to set the margin back to 0 for the first and last element. We can do this by targeting the middle element, but in case you want to add more images later we can also target the first and last element itself with the :first-child and :last-child selector.

So just add this to the css:

.articles-row li:first-child, .articles-row li:last-child {
   margin:0;
}

Upvotes: 1

Nourhan Ahmed
Nourhan Ahmed

Reputation: 179

try not give width of direct child of flexbox parent and you can put these images in anoter div diving them width=100% as

<div class="parent">
<div class="images">
<img src=".."/>
</div>
</div>

.parent{
    display: flex;
    justify content: space-between;
    widt: 100%;
    justify-content: space-around;
}
.images img{
width:100%
}

Upvotes: 0

Related Questions