Flexbox – Div at end of row

The following lines of code demonstrate how to align a div at the end of the flexbox row when you want to display the rest of the them at the start.


HTML

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

CSS

.container {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  width: 50%;
  height: 50px;
  background-color: skyblue;
  text-align: center;
}

.first {
  width: 50px;
  height: 50px;
  background-color: gray;
  color: white;
}

.last {
  width: 50px;
  height: 50px;
  margin-left: auto;
  background-color: gray;
  color: white;
}

Demo