How to add 1px margin to a flex item that is flex: 0 0 25%?

Question

I am testing few different layouts with flexbox and I have the following problem.

I have a image gallery with flex items set up flex:0 0 25%; and I would like to add 1px margin to them because 1% is to big. So I was wondering what should I do in this case.

I am attaching the example below.

#foto-container {
  display: flex;
  flex-wrap: wrap;
  flex: 1;
  justify-content: space-around;
  margin: 10px;
}

.foto {
  flex: 0 0 25%;
  min-height: 200px;
  background-color: red;
}


/*---------How I can add 1px to photo?-----------------*/

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<div id="foto-container">
  <div class="foto foto1">1</div>
  <div class="foto foto2">2</div>
  <div class="foto foto3">3</div>
  <div class="foto foto4">4</div>
  <div class="foto foto5">5</div>
  <div class="foto foto6">6</div>
  <div class="foto foto7">7</div>
  <div class="foto foto8">8</div>
  <div class="foto foto9">9</div>
  <div class="foto foto1">1</div>
  <div class="foto foto2">2</div>
  <div class="foto foto3">3</div>
</div>

Thanks,

Answer 1

Using border trick is another way that I've recently found.

Here I added a "white" border and it acts like a gap without breaking items.

And based on situation, transparent border can be used.

#foto-container {
  display: flex;
  flex-wrap: wrap;
  flex: 1;
  justify-content: space-around;
  margin: 10px;
}

.foto {
  flex: 0 0 25%;
  min-height: 200px;
  background-color: red;

  border: 1px solid white; /* <----- gap we need */
  box-sizing: border-box;  /* <----- required cause of box-model */
}

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<div id="foto-container">
  <div class="foto foto1">1</div>
  <div class="foto foto2">2</div>
  <div class="foto foto3">3</div>
  <div class="foto foto4">4</div>
  <div class="foto foto5">5</div>
  <div class="foto foto6">6</div>
  <div class="foto foto7">7</div>
  <div class="foto foto8">8</div>
  <div class="foto foto9">9</div>
  <div class="foto foto1">1</div>
  <div class="foto foto2">2</div>
  <div class="foto foto3">3</div>
</div>

Another way is to wrap the children items and use padding:

#foto-container {
  display: flex;
  flex-wrap: wrap;
  flex: 1;
  justify-content: space-around;
  margin: 10px;
}

.foto-child {
  flex: 0 0 25%;
  padding: 1px; /* <----- use padding for wrapper element */
  box-sizing: border-box; /* <----- required cause of box-model */
}

.foto {
  min-height: 200px;
  background-color: red;
}

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<div id="foto-container">
  <div class="foto-child">
    <div class="foto foto1">1</div>
  </div>
  <div class="foto-child">
    <div class="foto foto2">2</div>
  </div>
  <div class="foto-child">
    <div class="foto foto3">3</div>
  </div>
  <div class="foto-child">
    <div class="foto foto4">4</div>
  </div>
  <div class="foto-child">
    <div class="foto foto5">5</div>
  </div>
  <div class="foto-child">
    <div class="foto foto6">6</div>
  </div>
  <div class="foto-child">
    <div class="foto foto7">7</div>
  </div>
  <div class="foto-child">
    <div class="foto foto8">8</div>
  </div>
  <div class="foto-child">
    <div class="foto foto9">9</div>
  </div>
  <div class="foto-child">
    <div class="foto foto1">1</div>
  </div>
  <div class="foto-child">
    <div class="foto foto2">2</div>
  </div>
  <div class="foto-child">
    <div class="foto foto3">3</div>
  </div>
</div>

Answer 2

you can use calc method to solved this problem flex: calc(33.33% - 5%);

.digit-grid {
  display: flex;
  flex-wrap: wrap;
  font-size: 2em;
}

.box {
    flex: calc(33.33% - 5%);
    margin: 5px 5px;
    background: gray;
    height: 50px;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
}

Html goes here

<div class="digit-grid">
   <div class="box box1">1</div>
   <div class="box box2">2</div>
   <div class="box box3">3</div>
   <div class="box box4">4</div>
   <div class="box box5">5</div>
   <div class="box box6">6</div>
   <div class="box box7">7</div>
   <div class="box box8">8</div>
   <div class="box box9">9</div>
   <div class="box box10">10</div>
   <div class="box box11">11</div>
   <div class="box box12">12</div>
</div>

Answer 3

It's possible with flex, as shown in another answer to this post.

Your question is also covered in this post: Flexbox: 4 items per row

However, there's an even simpler solution with CSS Grid, if you're interested.

#foto-container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 1px;
  margin: 10px;
}

.foto {
  min-height: 200px;
  background-color: red;
}

<div id="foto-container">
  <div class="foto foto1">1</div>
  <div class="foto foto2">2</div>
  <div class="foto foto3">3</div>
  <div class="foto foto4">4</div>
  <div class="foto foto5">5</div>
  <div class="foto foto6">6</div>
  <div class="foto foto7">7</div>
  <div class="foto foto8">8</div>
  <div class="foto foto9">9</div>
  <div class="foto foto1">1</div>
  <div class="foto foto2">2</div>
  <div class="foto foto3">3</div>
</div>

Answer 4

You can use flex: 1 0 22% for example. This will allow your element to be defined by 22% as flex-basis (so only 4 elements per row) and they will grow to fill the remaining space left by margin (since flex-grow is set to 1)

#foto-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  margin: 10px;
}

.foto {
  flex: 1 0 22%;
  min-height: 50px;
  margin: 1px;
  background-color: red;
}

<div id="foto-container">
  <div class="foto foto1">1</div>
  <div class="foto foto2">2</div>
  <div class="foto foto3">3</div>
  <div class="foto foto4">4</div>
  <div class="foto foto5">5</div>
  <div class="foto foto6">6</div>
  <div class="foto foto7">7</div>
  <div class="foto foto8">8</div>
  <div class="foto foto9">9</div>
  <div class="foto foto1">1</div>
  <div class="foto foto2">2</div>
  <div class="foto foto3">3</div>
</div>

The value of flex-basis should be bigger than (20% - margin * 2) and lower than (25% - margin * 2). The first value will allow you to have 5 elements per row, so having a bigger value will make them 4 and having a bigger value than the second one will make the number of element to be 3 per row.

#foto-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  margin: 10px;
}

.foto {
  flex: 1 0 21%;
  min-height: 50px;
  margin: 1px;
  background-color: red;
  animation: change 4s linear infinite alternate; 
}

@keyframes change {
  0%,40% {flex: 1 0 calc(20% - 2 * 1px);background:yellow;}
  41%,59% {background:red;}
  60%,100% {flex: 1 0 calc(25% - 2 * 1px + 1px);background:green;}
}

<div id="foto-container">
  <div class="foto foto1">1</div>
  <div class="foto foto2">2</div>
  <div class="foto foto3">3</div>
  <div class="foto foto4">4</div>
  <div class="foto foto5">5</div>
  <div class="foto foto6">6</div>
  <div class="foto foto7">7</div>
  <div class="foto foto8">8</div>
  <div class="foto foto9">9</div>
  <div class="foto foto1">1</div>
  <div class="foto foto2">2</div>
  <div class="foto foto3">3</div>
</div>