css - 这个 flexbox 布局中的 CSS 计算从何而来？

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>

标签： cssflexbox

Answer 1

这是扩展的公式，因此您可以更好地查看。20px * 2基本上，我们从由 2 个13.33px图像2/3 * 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>