Targeting Flex Items on the Last or Specific Row

Targeting flex items on the last or specific row

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?

Prevent flex items in the last row becoming larger than other flex items

Adding invisible flex items is the most popular way to go. It keeps all the flex good stuff and is a hack that makes clear sense.

.hidden-flex-item {
    content: "";
    flex: 1 0 200px;
    padding: 5px;     
    margin-top: 10px;  
    margin-right: 5px;
    visibility: hidden;
}

Fiddle here: https://jsfiddle.net/px37t2jc/9/

Css grid can also handle this sort of issue easily if you take the time to learn it.

How to wrap last row of flexbox with space-around?

You could try CSS :last-child as in the example below to use different style in your last div.

.flexbox {  display: flex;  flex-flow: column;}
.flex-child {  background: red;  align-content: center;  align-self: center;}
.flex-child:last-child {  align-content: space-around;  align-self: flex-start;}

<div class="flexbox">  <div class="flex-child">    one  </div>  <div class="flex-child">    two  </div>  <div class="flex-child">    three  </div></div>

last row of flex div not starting from the left

.wrapper {  background: green;  text-align: center;  width: 80%;  margin-left: auto;  margin-right: auto;}.wrapper-inner {  padding: 5px;  display: flex;  flex-wrap: wrap;}
.square {  flex: 0 1 33.33%;}
.square img {  width: 100%;  display: block;}
.square-inner {  padding: 5px;}

<div class="wrapper">  <div class="wrapper-inner">    <div class="square">      <div class="square-inner">        <a href="#"><img src="http://placekitten.com/200/200" /></a>      </div>    </div>    <div class="square">      <div class="square-inner">        <a href="#"><img src="http://placekitten.com/200/200" /></a>      </div>    </div>    <div class="square">      <div class="square-inner">        <a href="#"><img src="http://placekitten.com/200/200" /></a>      </div>    </div>    <div class="square">      <div class="square-inner">        <a href="#"><img src="http://placekitten.com/200/200" /></a>      </div>    </div>    <div class="square">      <div class="square-inner">        <a href="#"><img src="http://placekitten.com/200/200" /></a>      </div>    </div>  </div></div>

Targeting the last div before flexbox or float wraps the rest

Basically what @vals said, but with some more details:

Let all flex items have the same margin-right, m.
Set the widths accordingly. For example, if you want n equal elements in a row, set width: calc(100%/n - m).
Let the flex container overflow its containing block, in order to hide the unwanted margin margin. Use margin: -m to achieve this.
Place the flex container in a wrapper with overflow: hidden.

.wrapper {  overflow: hidden;  border: 1px solid;}.flex {  display: flex;  flex-wrap: wrap;  margin-right: -2%;  text-align: center;}span {  margin-right: 2%;  border: 1px solid red;  box-sizing: border-box;}span:nth-child(-n + 3) { width: calc(100%/2  - 2%); }span:nth-child(n + 6)  { width: calc(100%/3  - 2%); }span:nth-child(1)      { width: calc(100%    - 2%); }span:nth-child(4)      { width: calc(100%*.4 - 2%); }span:nth-child(5)      { width: calc(100%*.6 - 2%); }

<div class="wrapper">  <div class="flex">    <span>100%</span>    <span>49%</span>    <span>49%</span>    <span>39%</span>    <span>59%</span>    <span>32%</span>    <span>32%</span>    <span>32%</span>  </div></div>

Targeting Flex Items on the Last or Specific Row