Откуда этот CSS-расчет в этом макете flexbox?

Question

Я видел такой макет флексбокса на сайте, который недавно видел, и мне интересно, откуда взято 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

Вот расширенная формула, чтобы вы могли лучше видеть.По сути, мы удаляем все поля из одной строки, которая создается двумя изображениями (20px * 2), затем делим все на 3. Таким образом, 13.33px равно 2/3 * 20px (только 2 из 3 имеют поле в 20 пикселей)

.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>