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:
|item 1| |item 2| | | | | |item 4| |item 5| |item 3| | | |item 6| |item 7| | |
|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?