Position flex-item on right side, other items flowing around it

I have a flexbox layout with a bunch of similar sized divs.
Now i want a table |item 3|, that spans multiple rows of these divs.
If the page gets narrower, the images should flow around |item 3| like below:

1080p-Screen:

|item 1| |item 2| |      |                   |      | |item 4| |item 5| |item 3|                   |      | |item 6| |item 7| |      | 

narrow Screen:

|item 1| |      |          |      | |item 2| |item 3|          |      | |item 4| |      |  |item 5| |item 6|  |item 7| |item 8|  

Basically I want |item 3| to be pinned to the top right, while the other items just flow around it. But I can’t get it to work. What I’ve tried is to place |item3| just before the flex-container with float:right but it looks like this:

|item 1| |      |          |      | |item 2| |item 3|          |      | |item 4| |      |  |item 5|   |item 6|  |item 7| 

Is this even possible with flexbox?

Asked on September 1, 2020 in CSS.
Add Comment
0 Answer(s)

Your Answer

By posting your answer, you agree to the privacy policy and terms of service.