Challenges in FLEX

[yoyo]

Guys

I’m learning flex. have faced the below challenges in creating a directory kind of page.

i have set the width for each persons i.e flex items as 100px and justify-content:space-between. when there is only 5 or 6 flex items it is aligned neat with a good space between them. when more flex-items are added they adjust themselves and the margin between them is very less.

yes we can add margin-right to flex-item but i want to occupy the full space and i am too much tired of writing nth-child styles to cut down last elements margin in every row.

and i want to align the remaining flex-items at the start or centre not the space between them. here is codepen.

Thanks in advance.

[Paulie_D]

There’s no easy /dynamic way to do that with flexbox…

Here’s some research reading for you.

https://stackoverflow.com/questions/42176419/targeting-flex-items-on-the-last-row

Frankly, this is what CSS-GRID was written for.

[yoyo]

Thanks Paulie.

will look into it.

[Author]

Posts