Using flex-wrap and align-content

The flex-wrap property allows us to determine whether we are going to wrap our content to a second row or squeeze all the flex items into a single row; align-content determines the alignment of a row that is being wrapped to multiple lines, thus becoming multiple rows. They are basically best friends.

Using flex-wrap

We'll return and use our flexbox sample page (flexbox.html) as a playground for testing these properties. Here's our CSS we ended up with in this area:

/***************
Flexbox demo
***************/
.flex-container {
  margin-top: 200px;
  display: flex;
  justify-content: flex-start;
}
.flex-item {
  padding: 20px;
}
.flex-item:last-child {
  margin-left: auto;
}
.flex-item1 { background: deeppink;}
.flex-item2 { background: orange; }
.flex-item3 { background: lightblue; }
.flex-item4 { background: lime; }
.flex-item5 { background: olive; }

The flex container has all of the content justified to flex-start, or in our case, to the left. This is because...