Question about CSS - Flexbox inside a View

Question

question

CoreyFleig-6304 asked May 9, '22 BrandoZhang-MSFT commented May 11, '22

Question about CSS - Flexbox inside a View

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

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

dotnet-aspnet-core-general

5 |1600 characters needed characters left characters exceeded

Attachments: Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

Answer 1 · 2022-05-09T08:03:20.737Z

BrandoZhang-MSFT answered May 9, '22 BrandoZhang-MSFT commented May 11, '22

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

· 2

5 |1600 characters needed characters left characters exceeded

Attachments: Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

CoreyFleig-6304 · May 09 at 05:28 PM

@BrandoZhang-MFST -

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

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

![200310-image.png ][1]

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 ·

image.png (4.4 KiB)

BrandoZhang-MSFT CoreyFleig-6304 · May 11 at 07:27 AM

In my opinion, you should put different div inside this page with the grid, then inside the second grid, you could consider using the flex or else.

0 ·

Answer 2 · 2022-05-09T16:55:39.38Z

CoreyFleig-6304 answered May 9, '22

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

image.png (3.9 KiB)

5 |1600 characters needed characters left characters exceeded

Attachments: Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

question