#33
Mind the Gap — flex-gap!

I use flex-based layouts a lot in the #Angular frontend of poketto.me. But I never realized there’s a neat little property called gap (or flex-gap) that lets you define spacing between flex items directly.

For the longest time, I worked around this with clumsy constructs where I’d set margins on child elements — and then unset them on the last child:

.container {
  display: flex;
  flex-direction: column;

  .child {
    margin-bottom: 1rem;
    
    &:last-child {
      margin-bottom: unset;
    }
  }
}
```

When really, the world could be so much simpler:

```
.container {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
```

No more margin hacks.