I have a pretty basic grid setup in flex, but I recently came across an oversight I made.
I have columns that have a margin-right: 3em and flex-basis: calc(33% - 3em).
My problem is that the 4th and 5th of these don't line up until there is a full "row" of 3.
Any insights as to why this is happening? I imagine I may be over-complicating things as per usual.
section {
width: 1170px;
margin: 0 auto;
padding: 4em;
background-color: lightgray;
}
.flex {
display: flex;
}
.wrap {
flex-wrap: wrap;
}
.column {
flex: 1;
flex-direction: column;
margin-right: 3em;
}
.column:last-child {
margin-right: 0;
}
.three {
max-width: 33%;
flex-basis: calc(33% - 3em);
}
.three:nth-child(3n) {
margin-right: 0;
}
.debug {
margin-bottom: 3em;
background-color: #ebf5fb;
height: 3em;
border: 1px dashed red;
text-align: center;
}
<section>
<div class="flex wrap">
<div class="column three debug">3 Columns</div>
<div class="column three debug">3 Columns</div>
<div class="column three debug">3 Columns</div>
<div class="column three debug">3 Columns</div>
<div class="column three debug">3 Columns</div>
</div>
</section>
Codepen
Since you use flex: 1, it will make the element take all available space, what's left after the flex-basis been retracted.
What stop the 2 last items from filling the entire row is the max-width, and since that its value is wider than the flex-basis, they will expand to it.
Either remove flex: 1 from column, or use the same calc for max-width as used for flex-basis
Stack snippet
section {
width: 1170px;
margin: 0 auto;
padding: 4em;
background-color: lightgray;
}
.flex {
display: flex;
}
.wrap {
flex-wrap: wrap;
}
.column {
flex: 1;
flex-direction: column;
margin-right: 3em;
}
.column:last-child {
margin-right: 0;
}
.three {
max-width: calc(33% - 3em); /* changed */
flex-basis: calc(33% - 3em);
}
.three:nth-child(3n) {
margin-right: 0;
}
.debug {
margin-bottom: 3em;
background-color: #ebf5fb;
height: 3em;
border: 1px dashed red;
text-align: center;
}
<section>
<div class="flex wrap">
<div class="column three debug">3 Columns</div>
<div class="column three debug">3 Columns</div>
<div class="column three debug">3 Columns</div>
<div class="column three debug">3 Columns</div>
<div class="column three debug">3 Columns</div>
</div>
</section>
Updated based on a comment
If to also make the items spread equally inside its parent, one need to divide the sum of the actual margin/gutter/gap space with the amount of items.
So in this case it would be (2 gaps * 3em) / 3 items = 2em
Also, one need the closest possible to a 1/3, which can be either e.g. 33.33333% or (100% / 3)
Stack snippet
section {
width: 1170px;
margin: 0 auto;
padding: 4em;
background-color: lightgray;
}
.flex {
display: flex;
}
.wrap {
flex-wrap: wrap;
}
.column {
flex: 1;
flex-direction: column;
margin-right: 3em;
}
.column:last-child {
margin-right: 0;
}
.three {
max-width: calc(33.33333% - 2em); /* changed */
flex-basis: calc(33.33333% - 2em); /* changed */
}
.three:nth-child(3n) {
margin-right: 0;
}
.debug {
margin-bottom: 3em;
background-color: #ebf5fb;
height: 3em;
border: 1px dashed red;
box-sizing: border-box; /* added */
text-align: center;
}
.debug2 {
border: 1px dashed red; /* added */
box-sizing: border-box; /* added */
}
<section>
<div class="flex wrap debug2">
<div class="column three debug">3 Columns</div>
<div class="column three debug">3 Columns</div>
<div class="column three debug">3 Columns</div>
<div class="column three debug">3 Columns</div>
<div class="column three debug">3 Columns</div>
</div>
</section>
Thank you LGson for pointing me in the right direction.
My math was incorrect.
I needed to take 100% - the total margins in the row.
Instead of flex-basis: calc(33% - 3em); it needed to be flex-basis: calc( (100% - 6em) / 3);
Updated Snippet
*,
::before,
::after {
background-repeat: no-repeat; /* 1 */
box-sizing: inherit; /* 2 */
}
html {
box-sizing: border-box; /* 1 */
cursor: default; /* 2 */
-ms-text-size-adjust: 100%; /* 3 */
-webkit-text-size-adjust: 100%; /* 3 */
}
section {
width: 1170px;
margin: 0 auto;
padding: 4em;
background-color: lightgray;
}
.flex {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
.wrap {
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.column {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
margin-right: 3em;
/*overflow: hidden;*/
}
.column:last-child {
margin-right: 0;
}
.three {
max-width: calc( (100% - 6em) / 3);
-ms-flex-preferred-size: calc( (100% - 6em) / 3);
flex-basis: calc( (100% - 6em) / 3);
}
.three:nth-child(3n) {
margin-right: 0;
}
.debug {
background-color: #EBF5FB;
margin-top: 1em;
padding: .75em;
text-align: center;
border: 1px dashed #E8DAEF;
}
<section>
<h2>Layout for 2 Dimensions</h2>
<h3>Specific Widths (or not)</h3>
<div class="flex wrap">
<div class="column three debug">1/3 Columns</div>
<div class="column three debug">1/3 Columns</div>
<div class="column three debug">1/3 Columns</div>
<div class="column three debug">1/3 Columns</div>
<div class="column three debug">1/3 Columns</div>
</div>
</section>
