Get Rid of Margin Hacks With Flexbox

When working with column gutters you can get rid of nth-, first-, and last-child hacks by using flexbox’s space-between property:

.list {
  display: flex;
  justify-content: space-between;
}
.list .person {
  flex-basis: 23%;
}

Now column gutters always appear evenly-spaced.