How do I give margin to image using flexbox?

Question

I want the images to have margin, so I wrote the justify-content: space-around but there is no margin between the top images and the bottom images.

  
#portfolio {
  background-color: #00C3A9;
  height: 800px;
}
.portfolio_pic {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
}

<div id="portfolio">  
  <div class="portfolio_pic">
 <img src="http://via.placeholder.com/350x300" alt="">
 <img src="http://via.placeholder.com/350x300" alt="">
 <img src="http://via.placeholder.com/350x300" alt="">
 <img src="http://via.placeholder.com/350x300" alt="">
 <img src="http://via.placeholder.com/350x300" alt="">
 <img src="http://via.placeholder.com/350x300" alt="">
</div>
</div>

Screenshot:

What can I do in this case? Thank you

margins should be set to children, there is no other ways to set 'gutters' in between flex wrapped rows. display:grid; has this option (grid-gap) , not flex. ;) `.portfolio_pic img {margin:X;}` is the most coherent way to achieve this in my own humble opinion :) — G-Cyrillus, Aug 12 '17 at 11:32

score 3 · Answer 1 · answered Aug 12 '17 at 10:54

You could try adding a margin to your images like so

img { margin-top: 15px; }

Or create a class with that style like so, and give each image that class:

.imagesingrid { margin-top: 15px; }
<img class="imagesingrid" src="http://via.placeholder.com/350x300" alt="">

score 2 · Answer 2 · answered Aug 12 '17 at 10:53

Flex is one dimensional. So when you use justify-content: space-around it manage it in defined dimension. row or column. Any reason not giving margin to image element?

#portfolio {
  background-color: #00C3A9;
  height: 800px;
}
.portfolio_pic {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
}

img {
  margin: 20px;
}

<div id="portfolio">  
  <div class="portfolio_pic">
 <img src="http://via.placeholder.com/350x300" alt="">
 <img src="http://via.placeholder.com/350x300" alt="">
 <img src="http://via.placeholder.com/350x300" alt="">
 <img src="http://via.placeholder.com/350x300" alt="">
 <img src="http://via.placeholder.com/350x300" alt="">
 <img src="http://via.placeholder.com/350x300" alt="">
</div>
</div>

score 1 · Accepted Answer · answered Aug 12 '17 at 11:02

I guess what you are trying to do is getting space between the flex lines of the flexbox (see a related issue here if you are interested) - so you can do add these rules:

align-content: space-around to vertically space the flex lines
height: 100% to occupy the height of the portfolio div.

See demo below:

#portfolio {
  background-color: #00C3A9;
  height: 800px;
}
.portfolio_pic {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  align-content: space-around;
  height: 100%;
}

<div id="portfolio">
  <div class="portfolio_pic">
    <img src="http://via.placeholder.com/350x300" alt="">
    <img src="http://via.placeholder.com/350x300" alt="">
    <img src="http://via.placeholder.com/350x300" alt="">
    <img src="http://via.placeholder.com/350x300" alt="">
    <img src="http://via.placeholder.com/350x300" alt="">
    <img src="http://via.placeholder.com/350x300" alt="">
  </div>
</div>

This works only when there is enough space for all image tags. When space is limited, the vertical spacing is gone. — Jan Franta, Aug 12 '17 at 11:12
@JanNahody that depends on what OP want to manage when space is limited - to *overflow* or not... — kukkuz, Aug 12 '17 at 11:19
Flex should be there to deal with dynamic variables. Here the OP have to set fix sizes. Sorry this is no solution for flex. Using fix sizes we do not need flex. — Jan Franta, Aug 12 '17 at 11:21

How do I give margin to image using flexbox?

3 Answers3