How to Align Left Last Row/Line in Multiple Line Flexbox

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?

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>

.container {
  background: tomato;
  display: flex;
  flex-flow: row wrap;
  align-content: space-between;
  justify-content: space-between;
}
.item {
  width: 100px;
  background: gold;
  height: 100px;
  border: 1px solid black;
  font-size: 30px;
  line-height: 100px;
  text-align: center;
  margin: 10px
}
.item:nth-child(4n - 1) {
  background: silver;
}
.line-break {
  width: 100%;
}

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="line-break"></div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
  <div class="line-break"></div>
  <div class="item">7</div>
  <div class="item">8</div>
  <div class="item">9</div>
  <div class="line-break"></div>
  <div class="item">10</div>
</div>