The Ultimate Flexbox Cheat Sheet

Watch a 3 minute video introduction with live demos you can view source on.

Table of Contents

Create a flex container

The first step in any flexbox layout is to create a flex container. To do that, set the display property to flex. In Safari, you will still have to use the -webkit prefix.

Watch a 3 minute video introduction to flexbox with live demos you can view source on.

.flexcontainer {
   display: flex;
}

Put flex items into a row

Flex items are the children of a flex container. They are positioned along a main axis and a cross axis. The main axis is horizontal by default, so the items flow into a row. You can flip the main axis by setting flex-direction to column, it's set to row by default.

Watch a 3 minute video on flexbox containers with live demos you can view source on.

/*On the flex container*/

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

Put flex items into a column

Watch a 3 minute video on flexbox containers with live demos you can view source on.

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

Move flex items to the top

How you move flex items to the top depends on the orientation of the main axis. If it's vertical, you set justify-content. If it's horizontal, you set align-items.

Watch a 3 minute video on flexbox containers with live demos you can view source on.

.flexcontainer {
   flex-direction: column;
   justify-content: flex-start;
}
      
.flexcontainer {
   display: flex;
   flex-direction: row;
   align-items: flex-start;
}

Move flex items to the left

Moving items to the left or right also depends on the orientation of the main axis. If flex-direction is set to row, then you set justify-content, otherwise if it's set to column you set align-items

Watch a 3 minute video on flexbox containers with live demos you can view source on.

.flexcontainer {
   display: flex;
   flex-direction: row;
   justify-content: flex-start;
}
.flexcontainer {
   display: flex;
   flex-direction: column;
   align-items: flex-start;
}
      

Move flex items to the right

Watch a 3 minute video on flexbox containers with live demos you can view source on.

 .flexcontainer {
   display: flex;
   flex-direction: row;
   justify-content: flex-end;
}
.flexcontainer {
   display: flex;
   flex-direction: column;
   align-items: flex-end;
}

Center everything

Vertical and horizontal centering within a flexcontainer is trivial. Just set justify-content and/or align-items to center. Again, it depends on the orientation of the main axis, so whether flex-direction is set to row or column.

Watch a 3 minute video on flexbox containers with live demos you can view source on.

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

Grow a flex item X times as big as other flex items

You can define how an individual flex item grows and shrinks relative to other flex items in the container. To do this set the flex property on each flex item you want to grow or shrink.

Watch a 3 minute video on how the flex items grow and shrink with interactive demos.

.bigitem {
   /* This will be twice as */
   /* big as the small item. */
   flex: 2 0 0;
}
.smallitem {
   flex: 1 0 0;
}
      

Wrap flex items into multiple rows

Watch a 3 minute video on how flex-wrap property works with interactive demos.

/* On the flex container */
.flexcontainer {
   display: flex;
   align-items: center;
   justify-content: center;
   /* You can set flex-wrap and
      flex-direction individually */
   flex-direction: row;
   flex-wrap: wrap;
   /* Or do it all in one line
     with flex flow */
   flex-flow: row wrap;
   /* tweak where items line
      up on the row
      valid values are: flex-start,
      flex-end, space-between,
      space-around, stretch */
   align-content: flex-end;
}
      

Wrap flex items into multiple columns

Watch a 3 minute video on how flex-wrap property works with interactive demos.

.flexcontainer {
   display: flex;
   align-items: center;
   justify-content: center;
   flex-flow: column wrap;
   align-content: stretch;
}
      

Remove the space from wrapped rows or columns

The align-content property gives you options for distributing the space around wrapped rows or columns. The options are flex-start, flex-end, space-between, space-around and stretch. To simply remove the space around wrapped columns, set align-content to center.

Watch a 3 minute video on properties like align-content with interactive demos.

.flexcontainer {
   display: flex;
   align-items: center;
   justify-content: center;
   flex-flow: column wrap;
   align-content: center;

}
      

Pin an element to one side of the flex container

You can control the align-items value for individual elements with align-self. You can also use margins to move individual elements up or down or left of right. e.g. on a column layout you can move an individual flex item all the way to the left of the container by setting margin-right: auto.

Watch a 3 minute video introduction to flexbox with live demos you can view source on.

/* On the flex item to pin */
.left {
   align-self: flex-start;
}

.right {
   margin-left: auto;
}
      

Other flexbox resources

Still copy/pasting flexbox code?

Take this free lesson on flexbox. You can't copy/paste your way through every problem.