Using margin as a gutter

[05beckga]

Hi im using flexbox and ive create 4 divs. I have 2 divs on each line with width of 50% (im also using flex:wrap). My question is why is it that when use :

.item {
    flex-basis: 50%;
    margin: 10px 10px;
    background: lightblue;
    height: 50px;
}

the divs all go to underneath eachother like block elements but if I use:

flex-basis: calc(50% - 20px);
margin: 10px;
background: lightblue;
height: 50px;

it works.

Is margin: 10px 10px the same as the margin in calc(50% - 20px)?

[PaulOB]

@05beckga

Is margin: 10px 10px the same as the margin in calc(50% - 20px)?

Yes the calc deducts 20px from the 50% width thus accounting for the 20px margin you added (10px either side).

You can’t have 50% + 50% + 20px + 20px all fit in the same line because that equals 100% + 40px.

Only 100% fits in any available space.