flexでgapが使える喜びは大きい

IE11が無視できればかなり便利なCSSの使い方ができたり、余計なTipsを覚えたりしなくていいので楽になってくるだろうと思う。

IE11のせいで使用できなかったgapが使えるようになったっぽい。

flexでアイテムを3列ずつ並べた時に、アイテムが7個や8個だった場合のTipsとかが不要になる。

なんのことはない

.flexBox {
  display: flex;
  flex-wrap: wrap;
  gap: 15px 20px;
}
.flexBox .item {
  flex-basis: calc((100% - 20px * 2) / 3);
}

こんな感じで綺麗に収まる。

space-between なんかも必要ないし、疑似要素も1列目2列目だけにmarginをつけるための疑似クラスなども不要。

20pxは固定値じゃなくても%などでもいけるし随分と楽になる気がします。