I’m trying to build out something with flex that has a layout like this…
<code> []
[][][]
[][][]
</code>
<code> []
[][][]
[][][]
</code>
[]
[][][]
[][][]
My breakpoints are fine when stacked (1 item per row), or 2 items per row by using
<code>ul {
flex-direction: row;
flex-wrap: wrap;
}
li {
flex: 0 0 48%;
}
li:first-of-type {
flex: 0 1 50%;
}
</code>
<code>ul {
flex-direction: row;
flex-wrap: wrap;
}
li {
flex: 0 0 48%;
}
li:first-of-type {
flex: 0 1 50%;
}
</code>
ul {
flex-direction: row;
flex-wrap: wrap;
}
li {
flex: 0 0 48%;
}
li:first-of-type {
flex: 0 1 50%;
}
But once I get to 3 per line the first item doesn’t seem to want to be by itself. I’m fine with having the flex code change with @media breaks, but I need to stay in flex as my last line needs to have any items below 3 centered aligned, not left aligned.
I’ve tried other combinations but have had no luck keeping the first line item the same size as the remaining row items.
New contributor
Nate is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.