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

Question

我看到一个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;
}

<div class="container">
  <div class="flex">
    <div class="flex-item"><img src="https://via.placeholder.com/800x400" /></div>
    <div class="flex-item"><img src="https://via.placeholder.com/800x400" /></div>
    <div class="flex-item"><img src="https://via.placeholder.com/800x400" /></div>
    <div class="flex-item"><img src="https://via.placeholder.com/800x400" /></div>
    <div class="flex-item"><img src="https://via.placeholder.com/800x400" /></div>
    <div class="flex-item"><img src="https://via.placeholder.com/800x400" /></div>
    <div class="flex-item"><img src="https://via.placeholder.com/800x400" /></div>
    <div class="flex-item"><img src="https://via.placeholder.com/800x400" /></div>
    <div class="flex-item"><img src="https://via.placeholder.com/800x400" /></div>
  </div>
</div>

Answer 1

这是扩展的公式，以便您可以更好地看到。基本上，我们删除由 2 个图像 ( ) 创建的一行中的所有边距20px * 2，然后将所有内容除以 3。所以是13.33px（2/3 * 20px3 个图像中只有 2 个具有 20px 边距）

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

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

.flex .flex-item {
  flex: 0 0 calc((100% - 20px * 2)/3);
  margin: 0 0 16px 20px;
}

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

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

<div class="container">
  <div class="flex">
    <div class="flex-item"><img src="https://via.placeholder.com/800x400" /></div>
    <div class="flex-item"><img src="https://via.placeholder.com/800x400" /></div>
    <div class="flex-item"><img src="https://via.placeholder.com/800x400" /></div>
    <div class="flex-item"><img src="https://via.placeholder.com/800x400" /></div>
    <div class="flex-item"><img src="https://via.placeholder.com/800x400" /></div>
    <div class="flex-item"><img src="https://via.placeholder.com/800x400" /></div>
    <div class="flex-item"><img src="https://via.placeholder.com/800x400" /></div>
    <div class="flex-item"><img src="https://via.placeholder.com/800x400" /></div>
    <div class="flex-item"><img src="https://via.placeholder.com/800x400" /></div>
  </div>
</div>