Targeting flex items on the last or specific row

Solution 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?

Solution 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*/
}