I have a simple flex container. For example:
.container {
display: flex;
flex-wrap: wrap;
outline: dashed red;
width: 300px;
}
.container > div {
width: 100px;
display: flex;
}
.container > div:nth-child(even) {
background-color: yellow;
}
.container > div:nth-child(odd) {
background-color: cyan;
} <div class="container">
<div>Item1</div>
<div>Item2</div>
<div>Item3</div>
<div>Item4</div>
<div>Item5</div>
<div>Item6</div>
<div>Item7</div>
<div>Item8</div>
<div>Item9</div>
<div>Item10</div>
</div>Using the row widths of this specific example, flex by default causes the first row to contain items 1, 2, and 3, and the last row to contain just 10. But I want the opposite of this, something like this:
1
2 3 4
5 6 7
8 9 10
If I use wrap-reverse, the behavior looks close to something I want:
10
7 8 9
4 5 6
1 2 3
The problem is that it just shifts the rows, and not the items in it also. Notice 1 is no longer the last one, so reversing is not an option. For example, if I couple wrap-reverse and use the order style to reverse the items of my order, it ends up being:
1
4 3 2
7 6 5
10 9 8
If I don't use wrap-reverse, the items are always grouped/bunched to the front.
Ideally I don't need to manually decorate the items with a specific order. The list of items is dynamic and comes from a CMS and I don't really have visibility into the items getting added from my component.
Is there any way to accomplish the layout behavior I am looking for?
---- edit -----
Sorry I left details out. I only used widths here to illustrate how flex is arranging items. In reality the size of both the container and the items may change, so I cannot take a dependency on fixed widths or column counts. Additionally I don't know the total number of items in advance as they are sourced from a CMS.
To have a dynamic list of elements flow in their source order but start filling rows from the last column of the last row is a task I don't believe CSS is advanced enough yet to accomplish. At least not without serious hackery of both the CSS and HTML.
Your best bet in my view would be to leave the HTML and CSS as is (it looks clean and good) and add a script to finish up the layout.
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments