Aligning Elements in Last Flexbox Row

Flex-box: Align last row to grid

Add a ::after which autofills the space. No need to pollute your HTML. Here is a codepen showing it: http://codepen.io/DanAndreasson/pen/ZQXLXj

.grid {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
}

.grid::after {
  content: "";
  flex: auto;
}

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?

CSS Flexbox: Align last nth items towards the end

You can do this two ways below.

Using nth-child()

Use margin-top:auto on nth-child(5) only to get your desired results

Live demo:

nav {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  height: 250px;
  width: 150px;
  border: 1px solid red;
}

div {
  display: flex;
  justify-content: center;
  border: 1px solid blue;
  width: 100%;
}

div:nth-child(5) {
  margin-top: auto;
}

<nav>
  <div>A</div>
  <div>B</div>
  <div>C</div>
  <div>D</div>
  <div>E</div>
  <div>F</div>
</nav>

CSS Flexbox Align Itens 2 itens per rows but last row only one item

You can handle this by assign width to the parent ( not more as two child witds together). Like this

.parent {
    display: flex;
    flex-wrap: wrap;
    padding: 24px 20px;
    justify-content: center;
    gap: 16px;
    width: 350px;
    margin: 0 auto;
}

.parent > .card {
   height: 220px;
   width: 152px;
   border: 1px solid black;
}

<div class="parent">
  <div class="card">1</div>
  <div class="card">2</div>
  <div class="card">3</div>
</div>

Flexbox wrap - different alignment for last row

You can try adding some left margin to push your .second element to the right:

.second {
    margin-left: auto;
}

.container {

  width:100%;

  display: flex;

  flex-direction: row;

  flex-wrap: wrap;

  justify-content: space-between;

  align-items: center;

}

.first {

  background-color: yellow;

  width: 200px;

  height: 100px;

}

.second {

  background-color: blue;

  width: 200px;

  height: 100px;

  margin-left: auto;

}

<div class="container">

  <div class="first"></div>

  <div class="second"></div>

</div>