I love Flexbox, but early on, getting consistent spacing between flex items was a massive pain. You could add padding to each item. But then the container would get out of alignment and need to reverse it with negative margins. This hack usually worked, but like all hacks, it risked breaking in all but the simplest setups. As we know, the setups are almost never simple.

.flexbox-wrapper {
display: flex;
flex-wrap: wrap;
margin: -1rem;
}

.flexbox-item {
padding: 1rem;
}

That's why the gap property is a Godsend. It gives Flexbox one of Grid's greatest powers: adding gaps that don't touch the surrounding spacing. It took a while to get full browser support, but I'm glad it's here to stay.

.flexbox-wrapper {
display: flex;
flex-wrap: wrap;
gap: 1rem;
}

To top it off, I learned that you can set different gap spacings for the horizontal and vertical gaps! This helps for visual spacing with items that have a more vertical or horizontal shape.

All it takes is to give the property two values. The first is for the vertical gap and the second for the horizontal gap.

See the Pen TIL Grid Gap examples by Maxwell Antonucci (@max1128) on CodePen.

If you want to only declare one at a time, vertical gaps are with row-gap, and horizontal gaps are column-gap.

This came in handy sooner than I expected. While spacing a series of flex-wrapped "icon and number" pairs on a work project. Each one is a landscape-oriented rectangle, so it needed more of a column gap than a row gap to not look awkward. Knowing Flexbox, I'll find many more uses before I know it.