I have a flexbox container that will contain 5 or 6 items. flex-direction of the container will be set to row. What I want is to distribute those items like this: The first item should be the first column, the second item should be the second column, and the rest 2 or 3 items should altogether be the third column, much like a grid configuration.
Unfortunately I can't alter the HTML markup to add additional containers that will help me. It has to be done purely in CSS (if it can be achieved).
I played around a bit in a Flex generator, and this is the closest I went (which isn't even close)...
.flex-container { display: flex; justify-content: flex-end; /* flex-flow: row wrap; */ flex-direction: row; flex-wrap: wrap; background-color: #bbdefb; height: 100%; padding: 15px; gap: 5px; } .flex-container > div{ background: #ffecb3; border: 3px solid #ffcc80; border-radius: 5px; padding: 8px; } .item1 { /* flex:0 1 32%; */ flex-basis:32%; align-self:auto; } .item2 { /* flex:0 1 32%; */ flex-basis:32%; align-self:auto; } .item3 { /* flex:0 1 32%; */ flex-basis:32%; align-self:flex-start; } .item4 { /* flex:0 1 32%; */ flex-basis:32%; align-self:flex-start; } .item5 { /* flex:0 1 32%; */ flex-basis:32%; align-self:flex-start; }<div class="flex-container"><div class="item1">item 1</div><div class="item2">item 2</div><div class="item3">item 3</div><div class="item4">item 4</div><div class="item5">item 5</div></div>Can someone please help me figure this out?