Properly calculating flex-basis taking into account gap and margins [duplicate] - html

Question

I am currently learning Flexbox Layout and I can not find a solution to my problem.
I tried with justify-content and flex-basis but it does not work. Does anyone have the solution ?
The result I would like :
section {
display: flex;
margin: 0 auto;
justify-content: space-between;
}
.column {
width: 100%;
background-color: #e2e2e2;
padding: 1%;
margin: 1%;
flex-grow: 1;
flex-shrink: 1;
flex-basis: 0;
}
#first {
flex-grow: 2;
flex-shrink: 2;
flex-basis: 0;
}
<section>
<div class="column" id="first">First</div>
<div class="column" id="second">Second</div>
<div class="column">Third</div>
</section>
<section>
<div class="column">First</div>
<div class="column">Second</div>
<div class="column">Third</div>
<div class="column">Fourth</div>
</section>
https://jsfiddle.net/qdsbacvn/

Answer 1

This is a perfect use case for CSS grid where you don't need a lot of complex code:
section {
display: grid;
margin: 2% auto;
grid-gap:2%;
grid-template-columns:repeat(4,1fr);
}
.column {
background-color: #e2e2e2;
padding: 5px;
}
#first {
grid-column:span 2;
}
<section>
<div class="column" id="first">First</div>
<div class="column" id="second">Second</div>
<div class="column">Third</div>
</section>
<section>
<div class="column">First</div>
<div class="column">Second</div>
<div class="column">Third</div>
<div class="column">Fourth</div>
</section>
With flexbox you can try the following:
section {
display: flex;
}
.column {
background-color: #e2e2e2;
padding: 1%;
margin: 1%;
flex-grow: 1;
flex-basis: 0;
}
#first {
flex-grow: 2;
flex-basis:4%; /*2 x (padding + margin)*/
}
<section>
<div class="column" id="first">First</div>
<div class="column" id="second">Second</div>
<div class="column">Third</div>
</section>
<section>
<div class="column">First</div>
<div class="column">Second</div>
<div class="column">Third</div>
<div class="column">Fourth</div>
</section>
Since your are using flex-basis:0 only padding/margin are considered before calculating the free space. The trick is to make sure we have the same free space in both situation thus we add to flex-basis of the big element the margin/padding that aren't present in the first case.

Answer 2

A bit overkill for your use case but a much more robust solution in case you need to add more rows or your margins need to change size.
.parent {
display: flex;
flex-direction:row;
}
.column {
flex:1;
display:flex;
flex-direction:column
}
.column:first-child {
flex:2;
}
.col-row {
flex:1;
display:flex;
flex-direction:row;
}
.col-row > div{
flex:1;
display:flex;
flex-direction:row;
margin:1vw;
padding:1vw;
background-color: #e2e2e2;
}
<div class="parent">
<div class="column">
<div class="col-row">
<div>First</div>
</div>
<div class="col-row">
<div>First</div>
<div>Second</div>
</div>
</div>
<div class="column">
<div class="col-row">
<div>Second</div>
</div>
<div class="col-row">
<div>Third</div>
</div>
</div>
<div class="column">
<div class="col-row">
<div>Third</div>
</div>
<div class="col-row">
<div>Fourth</div>
</div>
</div>
</div>

Answer 3

Check my code. I have increased slightly the flex box value.
section {
display: flex;
margin: 0 auto;
justify-content: space-between;
}
.column {
width: 100%;
background-color: #e2e2e2;
padding: 1%;
margin: 1%;
flex-grow: 1;
flex-shrink: 1;
flex-basis: 0;
}
#first {
flex-grow: 2.2;
flex-shrink: 2;
flex-basis: 0;
}
<section>
<div class="column" id="first">First</div>
<div class="column">Second</div>
<div class="column">Third</div>
</section>
<section>
<div class="column">First</div>
<div class="column">Second</div>
<div class="column">Third</div>
<div class="column">Fourth</div>
</section>