Flexbox Cheat Sheet

In order to use flexbox, you must create a flex container in which your content will live within. It’s as easy as creating a class, and setting the property to display: flex or display: -webkit-flex; in Safari DevTools.

Setting up a flex container

.flex-container {
  display: flex;
  display: -webkit-flex;
}

Items in a row

.flex-container {
  display: flex;
  display: -webkit-flex;
  flex-direction: row;
  -webkit-flex-direction: row;
}

Items in a column

.flexcontainer {
  display: flex;
  display: -webkit-flex;
  flex-direction: column;
  -webkit-flex-direction: column;
}

Items in a reversed row

.flex-container {
  display: flex;
  display: -webkit-flex;
  flex-direction: row-reverse;
  -webkit-flex-direction: row-reverse;
}

Items in a reversed column

.flexcontainer {
  display: flex;
  display: -webkit-flex;
  flex-direction: column-reverse;
  -webkit-flex-direction: column-reverse;
}

No wrap items within a row

.flexcontainer {
  display: flex;
  display: -webkit-flex;
  flex-direction: row;
  -webkit-flex-direction: row;
  flex-wrap: nowrap;
}

Wrap items within a row

.flexcontainer {
  display: flex;
  display: -webkit-flex;
  flex-direction: row;
  -webkit-flex-direction: row;
  flex-wrap: wrap;
}

Reverse wrap items within a row

.flexcontainer {
  display: flex;
  display: -webkit-flex;
  flex-direction: row;
  -webkit-flex-direction: row;
  flex-wrap: wrap-reverse;
}

Align items in the row to the left

.flexcontainer {
  display: flex;
  display: -webkit-flex;
  flex-direction: row;
  -webkit-flex-direction: row;
  justify-content: flex-start;
}

Align items in row to the right

.flexcontainer {
  display: flex;
  display: -webkit-flex;
  flex-direction: row;
  -webkit-flex-direction: row;
  justify-content: flex-end;
}

Align items in row to the center

.flexcontainer {
  display: flex;
  display: -webkit-flex;
  flex-direction: row;
  -webkit-flex-direction: row;
  justify-content: center;
}

Have items fill entire row with space between

.flexcontainer {
  display: flex;
  display: -webkit-flex;
  flex-direction: row;
  -webkit-flex-direction: row;
  justify-content: space-between;
}

Align row at the top

.flexcontainer {
  display: flex;
  display: -webkit-flex;
  flex-direction: row;
  -webkit-flex-direction: row;
  align-items: flex-start;
}

Align row at the bottom

.flexcontainer {
  display: flex;
  display: -webkit-flex;
  flex-direction: row;
  -webkit-flex-direction: row;
  align-items: flex-end;
}

Align row in the middle

.flexcontainer {
  display: flex;
  display: -webkit-flex;
  flex-direction: row;
  -webkit-flex-direction: row;
  align-items: center;
}

Choose the order of items

.flexcontainer {
  display: flex;
  display: -webkit-flex;
  flex-direction: row;
  -webkit-flex-direction: row;
  align-items: center;
    .item {
      .one {
        order: -1; // change 1 to -1 (by ngoclb)
    }
}

Inspect this element and check the order of the elements. Note the first element (RED) is actually the third in the DOM.

But wait…there’s more.

This flexbox cheat sheet gives you an idea and shows you the different ways flexbox can be used. There are several more properties including alignging content in stretch fashion, align an item individually in which flexbox can perform and much more.