I'm having some trouble with a Flexbox layout and can't seem to find the right solution.
My goal is to have 3 items per row, but not force them to fill up the entire row if there are less than 3 items.
For example:
1 2 3
4 _ _
On smaller screens, it should look like this:
1 2
3 4
However, what I currently get is:
1 _
2 _
3 _
4 _
.flex_container {
display: flex;
flex-wrap: wrap;
}
.flex_container .third {
width: 33.333%;
padding-right: 10px;
margin-bottom: 10px;
}
@media(min-width:981px) {
.flex_container .third:nth-child(3n) {
padding-right: 0px;
}
}
@media(max-width:980px) {
.flex_container .third {
width: 50%;
padding: 0px 5px!important;
}
}
@media(max-width:768px) {
.flex_container .third {
width: 100%;
}
}<div class="flex_container">
<div class="third">1</div>
<div class="third">2</div>
<div class="third">3</div>
<div class="third">4</div>
</div>Can anyone help me figure out what I'm missing?