CODEWITHSUNDEEP
cssflexbox
Timothy Fisher
Timothy Fisher

Reputation: 1129

Where does this CSS calculation come from in this flexbox layout?

I saw a flexbox layout like this on a website I recently saw and I'm wondering where the 13.333px comes from in the flex: 0 0 calc(33.333% - 13.333px) rule.

There is a margin-left set on each of the flex items, and then obviously to make the left side flush with the side of the container, you use the .flex .flex-item:nth-child(3n+1) rule to remove the margin from the start of every row.

In my head that means that there's 40px of padding in each row since two items still have the margins. So, I would expect it to be 33.333% - 40px. But, doing that leaves extra space in the container.

Where does the 13.333px come from? I'm assuming it's just something mathematical that I'm not getting.

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

Upvotes: 6

Views: 111

Answers (1)

Temani Afif
Temani Afif

Reputation: 273571

Here is the expanded formula so you can better see. Basically, we remove all the margin from one row which is created by 2 images (20px * 2) then we divide everything by 3. So the 13.33px is 2/3 * 20px (only 2 of the 3 have 20px margin)

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

Upvotes: 4

Related Questions