Question about CSS - Flexbox inside a View

Question

I hope it's okay to ask a flexbox question here. I'm working on finding a forum for that.

I have an index.cshtml file with the following, where the flex-item has "flex: 0 0 20%"

<div class="flex-container">
@foreach (var i in Model)
{
<div class="flex-item">
<!-- show a card here -->
</div>
}
</div>

This displays 5 items (card) across the screen, and works great.
My question is this: is there a way to basically do the following:

card       card     card    card     card

<skip> card card card card
<skip> card card card card

etc.?

Answer 1

According to your description, we could use CSS selector :nth-child() Selector to achieve your requirement, if you want to hide the first div for the next line, I suggest you could try below CSS:

More details, you could refer to this article.

/*Used for the next line start */
.flex-item:nth-child(5n+1){
 visibility:hidden;
}

/*Used for the first column */
.flex-item:nth-child(1){
visibility:visible;
}

Answer 2

@BrandoZhang-MFST -

Wow - thank you! I'll click the "Accept Answer".

Just to follow up, here's my ultimate goal, something like the following:

I'd like to have this responsive, so I started reading up on flex.

Do you think I'm on the right track? Or do it differently (grid, mix of flex/grid, etc.)?