基本的な方法

1. flex-basis を使う方法

.container {
  display: flex;
  flex-wrap: wrap;
}

.item {
  flex: 0 0 33.333%;  /* 3列の場合 */
  /* flex: 0 0 25%;   4列の場合 */
  /* flex: 0 0 50%;   2列の場合 */
}

2. width を使う方法

.container {
  display: flex;
  flex-wrap: wrap;
}

.item {
  width: 33.333%;  /* 3列 */
}

3. gap（余白）を考慮する場合

.container {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.item {
  /* 3列でgapを考慮 */
  flex: 0 0 calc((100% - 32px) / 3);
  /* (100% - gap × 2) / 列数 */
}

実用的な例

/* 4列レイアウト（レスポンシブ対応） */
.container {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.item {
  flex: 0 0 calc((100% - 60px) / 4);  /* PC: 4列 */
}

@media (max-width: 768px) {
  .item {
    flex: 0 0 calc((100% - 20px) / 2);  /* タブレット: 2列 */
  }
}

@media (max-width: 480px) {
  .item {
    flex: 0 0 100%;  /* スマホ: 1列 */
  }
}

補足

列数を厳密に制御したい場合は、CSS Grid の方が適している、楽な場合も多々あります

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);  /* 3列 */
  gap: 16px;
}