这个CSS计算在这个flexbox布局中来自哪里？

我看到一个Flexbox的布局像这样的网站我最近看到的,我想知道的13.333px是来自于flex: 0 0 calc(33.333% - 13.333px)规则.

margin-left每个弹性项目都有一个集合,然后显然要使左侧与容器的侧面齐平,您可以使用.flex .flex-item:nth-child(3n+1)规则从每行的开头删除边距.

在我的脑海中,这意味着每行中有40px的填充,因为两个项目仍然具有边距.所以,我希望它是33.333% - 40px.但是,这样做会在容器中留下额外的空间.

它13.333px来自哪里？我假设它只是一些数学上我没有得到的东西.

.container {
  max-width: 1140px;
  margin: 0 auto;
}

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

.flex .flex-item {
  flex: 0 0 calc(33.333% - 13.333px);
  margin: 0 0 16px 20px;
}

.flex .flex-item:nth-child(3n+1) {
  margin-left: 0;
}

img {
  max-width: 100%;
  height: auto;
}