Is it possible to the 'grow order' on flex-box children?

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:

		<style type="text/css" media="screen">
			.container {
 				max-width: 960px;
 				min-width: 320px;
 				background: #dcd1d1;
 				padding: .5em;
				margin: 0 auto;
				display: flex;
				flex-wrap: wrap;
				
 
			}
			.pannel{
				background: #eee;
				margin: .5em ;
				padding: .5em;
 				flex: 1 0 calc(25% - 2.125em);
 				text-align: center;
			}
		 <div class="container">
			 <div class="pannel">pannel-1</div>
			 <div class="pannel">pannel-2</div>
			 <div class="pannel">pannel-3</div>
			 <div class="pannel">pannel-4</div>
			 <div class="pannel">pannel-5</div>
			 <div class="pannel">pannel-6</div>
                 </div>

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

			.pannel:nth-child(1):nth-last-child(4n+2), 
			.pannel:nth-child(1):nth-last-child(4n+2)+.pannel,
			.pannel:nth-child(1):nth-last-child(4n+3)+.pannel,
			.pannel:nth-child(1):nth-last-child(4n+3)+.pannel+.pannel
				{ min-width: calc(50% - 2.5em)}
			.pannel:nth-child(1):nth-last-child(4n+1),.pannel:nth-child(1):nth-last-child(4n+3)
				{ min-width: calc(100% - 2.5em) }

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…

1 Like

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

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>stretch top row only</title>
<!--
https://www.sitepoint.com/community/t/is-it-possible-to-the-grow-order-on-flex-box-children/357210
dresden_phoenix
2020.09.12
ronpat's try
-->
    <style>

html {
    box-sizing:border-box;
}
*,*::before,*::after {
    box-sizing:inherit;
}
.container {
    max-width: 960px;
    background-color: #dcd1d1;
    padding: 0.5em;
    margin: 0 auto;
    display: flex;
    flex-flow:row-reverse wrap-reverse; /* */
}
.panel {
    background-color: #eee;
    margin: 0.5em;
    padding: 0.5em;
    flex: 1 0 calc(25% - 2.125em); /* */
    text-align: center;
}

.panel:nth-child(1) {order:-1}
.panel:nth-child(2) {order:-2; background-color:pink;} /* test bgcolor. TB Deleted */
.panel:nth-child(3) {order:-3}
.panel:nth-child(4) {order:-4}
.panel:nth-child(5) {order:-5}
.panel:nth-child(6) {order:-6}
.panel:nth-child(7) {order:-7}
.panel:nth-child(8) {order:-8}
.panel:nth-child(9) {order:-9}
.panel:nth-child(10) {order:-10}
.panel:nth-child(11) {order:-11}
.panel:nth-child(12) {order:-12}

@media screen and (max-width:720px) {
    .panel {
        flex-basis:calc(33% - 2.125em)
    }
}
@media screen and (max-width:520px) {
    .panel {
        flex-basis:calc(50% - 2.125em)
    }
}
    </style>
</head>
<body>

<div class="container">
    <div class="panel">panel-1</div>
    <div class="panel">panel-2</div>
    <div class="panel">panel-3</div>
    <div class="panel">panel-4</div>
    <div class="panel">panel-5</div>
    <div class="panel">panel-6</div>
    <div class="panel">panel-7</div>
    <div class="panel">panel-8</div>
    <div class="panel">panel-9</div>
    <div class="panel">panel-10</div>
    <div class="panel">panel-11</div>
</div>

</body>
</html>
1 Like

What’s the issue ?

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 :slight_smile:)

2 Likes

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. :slight_smile: )

PS…II would hope to the all-mighty that we would NEVER have 100 elements…lol

2 Likes