I am seeing up a responsive x/4-col grid using flex box. What i mean with x/4: we have an unknown amount of child elements, set into groups of 4 elements per ‘row’, with the remaining space beign stretched to fill. flex-box with flex box wrap is an awesome tool and ALMOST does what i want right out of the box. see below:
This is almost the behavior I want, except, that i would like the first elements ( in this case pannel-1 and panel -2) to be the ones that stretch to fit as opposed to the last two elements. please note I DO NOT want to swap the first couple of elements with the last couple of elements, i just want to swap the way they stretch in this situation.
I actually use this method to accomplish what am after
Which works, but requires additional rules, not to mention cause a potential ‘fizz-buzz’ issue. So i was wondering if any CSS experts out there may have derived a more graceful way to code this. As always, any insight is greatly appreciated.
I was thinking I could do it with a combination of flex-wrap and flex-direction settings, but no.
Then I did come up with this, though not 100% happy with it, as it involves numbers:-
Though I’ve got a bit rusty with flex, not been doing much CSS of late.
I’m sure someone will come along with a better set up.
My money is on…
@dresden_phoenix, @SamA74
I think I have the general layout (top row) working as requested, but I’m stumbling around setting up the break point mechanism. I added a couple of media queries but still need to reduce the narrowest view to one column. Try this please and see if it helps with the the top row.
Your method looks the only automatic way to do it.
i would have suggested something like Ronpat’s method but of course you’d have to set a great big long list of order properties so that you could reorder larger amounts.
(Which you could do with SCSS quite easily though )
Thanks Paul and Ron or confirming. I thought perhaps I was missing out on some fancy method or obscure property.
Personally , would have thought this would have been part of the standard. Something like stretch-in-reverse, as semantically and graphically the first elements have more priority, so it would make sense if they would be the ones to stretch to fill when there were remainers.
(oh, i only brought it up, because in some cases you can almost do away with media queries when you use flex-box and flex-basis and i didnt want to lose that. )
PS…II would hope to the all-mighty that we would NEVER have 100 elements…lol