Question about CSS - Flexbox inside a View

Coreysan 1,651 Reputation points

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 -->

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


A set of technologies in the .NET Framework for building web applications and XML web services.
4,361 questions
0 comments No comments
{count} votes

Accepted answer
  1. Brando Zhang-MSFT 3,441 Reputation points Microsoft Vendor

    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 */
    /*Used for the first column */

1 additional answer

Sort by: Most helpful
  1. Coreysan 1,651 Reputation points

    @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.)?

    0 comments No comments