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 woul

Answer 1

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

   
1
   
2
   
3
   
4
   
5
   
6
   
7
   
8
   
9
   
10
   
11
   
12