justify-content: space-between with equal space between first and last items also [duplicate]

Answer 1

How about using 0 width pseudo elements before and after the items?

.container{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    border: 1px solid #C55;
}

.column {
  flex: 1 20%;
  max-width: 20%;
  height: 100px;
  background: #C55;
}

.even:before, .even:after{
  content: '';
  display: block;
  width: 0;
}

no side spacing:

  

  

  




side spacing: