Question about CSS - Flexbox inside a View

Coreysan 1,651 Reputation points
2022-05-09T03:02:56.123+00:00

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

ASP.NET Core
ASP.NET Core
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
    2022-05-09T08:03:20.737+00:00

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

1 additional answer

Sort by: Most helpful
  1. Coreysan 1,651 Reputation points
    2022-05-09T16:55:39.38+00:00

    @BrandoZhang-MFST -

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

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

    200367-image.png

    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