Make flexbox children wrap around a child that is multiple rows tall - html

Question

I am iterating over a list of items(red boxes). I have another element not part of this list that I want to insert into the items' grid in the top right(tall blue box). I am using flexbox and order to position it accordingly. But I want the 2nd row of red items to be 3 items wide and wrap inline with the blue aside. Screenshot of my ideal outcome below. Code at the bottom of my failed attempt.
.flex {
display: flex;
flex-wrap: wrap;
margin: auto;
max-width: 120px;
}
.flex>div {
background: red;
height: 25px;
width: 25px;
margin: 2px;
order: 3;
}
.flex>div:nth-child(-n+3) {
order: 1;
}
aside {
height: 55px;
width: 25px;
margin: 2px;
background: blue;
order: 2;
}
<div class="flex">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<aside></aside>
</div>
Worth noting that I know I can do this with floats but for other reasons unrelated to this problem I'm kind of stuck with flexbox. Open to any & all suggestions though.

Answer 1

Here is the problem you're facing with flexbox, and several potential solutions:
Is it possible for flex items to align tightly to the items above them?
Make a div span two rows in a grid
Here's a calculator keypad layout using flexbox:
Calculator keypad layout with flexbox
Here's the cleanest and most efficient CSS solution, which uses Grid:
.flex {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-auto-rows: 25px;
grid-gap: 5px;
margin: auto;
max-width: 120px;
}
aside {
grid-column: 4;
grid-row: 1 / span 2;
background: blue;
}
.flex > div {
background: red;
}
<div class="flex">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<aside></aside>
</div>
jsfiddle demo
css grid browser support

Answer 2

.flex {
display: flex;
flex-wrap: wrap;
margin: auto;
max-width: 120px;
}
.flex>div {
background: red;
height: 25px;
width: 25px;
margin: 2px;
order: 3;
}
.flex>div:nth-child(-n+3) {
order: 1;
}
aside {
height: 55px;
width: 25px;
margin: 2px;
background: blue;
order: 2;
margin-bottom: -57px; /* added */
}
.flex>div:nth-child(6) { /* added */
margin-right: 27px;
}
<div class="flex">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<aside></aside>
</div>

Answer 3

Here is a version of another answer of mine, which might also qualify as a duplicate, though since it has a simpler CSS, I decided to post it as an answer.
It uses the order property and absolute position, to enable the required layout.
Read more here: Flexbox or Column CSS for positioning elements like this
Stack snippet
.container {
display: flex;
flex-wrap: wrap;
}
.container .right_corner > div {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: calc(200% + 10px);
background: blue;
}
.container::before,
.container > div {
height: 50px;
margin: 5px;
}
.container > div:not(:first-child) {
background: red;
}
.container .right_corner {
position: relative;
order: 1;
}
.container::before {
content: '';
order: 3;
}
#media (max-width: 600px){
.container > div:nth-child(n+5) {
order: 2;
}
.container > div:nth-child(n+8) {
order: 4;
}
.container::before,
.container > div {
width: calc((100% / 4) - 10px);
}
}
#media (min-width: 601px) and (max-width: 800px){
.container > div:nth-child(n+6) {
order: 2;
}
.container > div:nth-child(n+10) {
order: 4;
}
.container::before,
.container > div {
width: calc((100% / 5) - 10px);
}
}
#media (min-width: 800px) {
.container > div:nth-child(n+7) {
order: 2;
}
.container > div:nth-child(n+12) {
order: 4;
}
.container::before,
.container > div {
width: calc((100% / 6) - 10px);
}
}
<div class='container'>
<div class='right_corner'>
<div></div>
</div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>