Targeting flex items on the last or specific row

Question

My problem is that I want the flexbox with variable range width, and all works well, but not on the last row. I want the same dimension for all children even where the row is not full of children (the last row).

#products-list {     position:relative;     display: flex;     flex-flow: row wrap;     width:100%; }  #products-list .product {     min-width:150px;     max-width:250px;     margin:10px 10px 20px 10px;     flex:1; } 

I created a dynamic situation in jsFiddle

My flex divs can shrink until 150px and grow up to 250px, but all must be with the same size (and obviously I want a CSS solution, with JS I know the way).

Answer 1

Unfortunately, in the current iteration of flexbox (Level 1), there is no clean way to solve the last-row alignment problem. It's a common problem.

It would be useful to have a flex property along the lines of:

• last-row
• last-column
• only-child-in-a-row
• alone-in-a-column

This problem does appear to be a high priority for Flexbox Level 2:

• CSS Working Group Wiki - Specification Issues and Planning
• https://lists.w3.org/Archives/Public/www-style/2015Jan/0150.html

Although this behavior is difficult to achieve in flexbox, it's simple and easy in CSS Grid Layout:

• Equal width flex items even after they wrap

In case Grid is not an option, here's a list of similar questions containing various flexbox hacks:

• Properly sizing and aligning the flex item(s) on the last row
• Flex-box: Align last row to grid
• Flexbox wrap - different alignment for last row
• How can a flex item keep the same dimensions when it is forced to a new row?
• Selector for an element alone in a row?
• Aligning elements in last flexbox row
• How can I allow flex-items to grow while keeping the same size?
• Left-align last row of flexbox using space-between and margins
• Inconsistent margin between flex items on last row
• How to keep wrapped flex-items the same width as the elements on the previous row?
• How to align left last row/line in multiple line flexbox
• Last children of grid get giant gutter cause of flexbox space-between
• Managing justify-content: space-between on last row
• Flexbox space between behavior combined with wrap
• Possible to use CSS Flexbox to stretch elements on every row while maintaining consistent widths?

Answer 2

As a quick and dirty solution one can use:

.my-flex-child:last-child/*.product:last-child*/ {   flex-grow: 100;/*Or any number big enough*/ }