flexbox-cheatsheet.md

FLEXBOX CHEAT SHEET

Quick guide to flexbox in Chrome

Create a flex container

  /*on the flex container*/
  .flexcontainer {
     display: -webkit-flex;
  }

Put flex items into a row

  /*On the flex container*/
  .flexcontainer {
     -webkit-flex-flow: row;
  }

Put flex items into a column

  /*On the flex container*/
  .flexcontainer {
     -webkit-flex-flow: column;
  }

Move flex items to the top

  /* On the flex container*/
  .flexcontainer {
     -webkit-flex-flow: column;
     -webkit-justify-content: flex-start;
  /*or...*/
  .flexcontainer {
     -webkit-flex-flow: row; 
     -webkit-align-items: flex-start;
  }

Move flex items to the left

  /*On the flex container*/
  .flexcontainer {
     -webkit-flex-flow: row; 
     -webkit-justify-content: flex-start;
  }

  /* or... */
  
  .flexcontainer {
     -webkit-flex-flow: column; 
     -webkit-align-items: flex-start;
  }

Move flex items to the right

  /* On the flex container */

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

  /* or... */
  
  .flexcontainer {
     -webkit-flex-flow: column;
     -webkit-align-items: flex-end;
  }

Center everything

  /* On the flex container */
  
  .flexcontainer {
     -webkit-flex-flow: 
     -webkit-align-items: center;
     -webkit-justify-content: center;
  }

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

  /* on the flex item you want to grow */
  .bigitem {
     -webkit-flex: X 0 0; /* where X is an integer greater than 0 */
  }
  .smallitem {
     -webkit-flex: 1 0 0;
  }

Wrap flex items into multiple rows

  /* On the flex container */
  .flexcontainer {
     -webkit-flex: row wrap;
  }

Wrap flex items into multiple columns

  /* On the flex container */
  .flexcontainer {
     -webkit-flex: column wrap;
  }

Remove the space from wrapped rows or columns

  /* On the flex container */
  .flexcontainer {
     -webkit-flex: column wrap;
     -webkit-align-content: flex-start;
     /* flex-end and center are also valid values for align-content. */
  }

Pin an element to one side of the window

  /* On the flex item to pin */
  .pinneditem {
     margin-left: auto; /* pin to right */
     margin-right: auto; /* pin to left */
     margin-top: auto; /* pin to bottom */
     margin-bottom: auto; /* pin to top */
  }

Other flexbox resources

The latest spec
CSS-Tricks guide to flexbox
Mozilla guide to flexbox
Smashing Magazine tutorial