Flexbox是一种一维布局方法，用于在行 * 或 * 列中排列项目。项目可伸缩（增加或收缩）以填充可用空间。
Grid是一个二维布局系统，允许您将内容按行 * 和列 * 进行布局。我相信网格是更好的选择为您的意图。

.container {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-auto-rows: 50px;
  gap: 10px;
}

.box {
  background: yellow;
}

<div class="container">
  <div class="box">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
  <div class="box">4</div>
  <div class="box">5</div>
  <div class="box">6</div>
  <div class="box">7</div>
  <div class="box">8</div>
  <div class="box">9</div>
  <div class="box">10</div>
  <div class="box">11</div>
  <div class="box">12</div>
</div>

这里有一个例子来解决你遇到的问题。

.container {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
}
.box {
    width: calc(20% - 30px); //minus the gap
    background: #ffd6d6
}
.box:nth-of-type(even) {
    background: #fafafa;
}

<div class="container">
  <div class="box">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
  <div class="box">4</div>
  <div class="box">5</div>
  <div class="box">6</div>
  <div class="box">7</div>
  <div class="box">8</div>
  <div class="box">9</div>
  <div class="box">10</div>
  <div class="box">11</div>
  <div class="box">12</div>
</div>

你也可以给予.container类一个max-width和margin: 0 auto来使它响应。或者使用Bootstrap，它使用具有构建响应功能的Flex Box容器以及更多功能。

你的标题和描述是矛盾的，我假设你想要5列，当5列被放置，新的项目 Package 到下一个 Package 。
将flex-basis的值设置为100 /在（100 / 6）= 16.66%处应该发生换行的列：

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

.box {
  flex: 1 0 16.66%;
  height: 50px;
  background: yellow;
}

<div class="container">
  <div class="box">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
  <div class="box">4</div>
  <div class="box">5</div>
  <div class="box">6</div>
  <div class="box">7</div>
  <div class="box">8</div>
  <div class="box">9</div>
  <div class="box">10</div>
  <div class="box">11</div>
  <div class="box">12</div>
</div>