flexでgapを使うときのwidth指定

<ul class="flex">
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>  

@function flexWidth($gap: 20px, $columnCount: 3) {
 @return calc((100% / $columnCount) - ((($columnCount - 1) / $columnCount) * $gap));
}

.flex {
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
}

.flex-item {
  width: flexWidth(30px, 4);
}

flexで横並びにし、要素間は20pxで要素は25%の幅にしたい、というときの指定方法です。
素直にwidth: 25%; とするとgap分が足されて段落ちしてしまう（横幅の計算は25% + 20px + 25% + 20px +…となる）ので、それを回避する＝gapが足されることを考慮した％がwidthに指定されるためのfunctionです。
gapと列数を引数に設定します。

カード型のリンク一覧を作りたいときとかにどうぞ。