flexbox cheat sheet

by Abdul Ahmad

HTML

<div class='box'>
  <div class='row-item fifty'>
    <div class='item'>
      one
    </div>
    <div class='item'>
      one
    </div>
    <div class='item'>
      one
    </div>
    <div class='item'>
      one
    </div>
    <div class='item'>
      one
    </div>
  </div>
  <div class='row-item blue lg'>
  
    <div class='item'>
      one
    </div>
    <div class='item'>
      one
    </div>
    <div class='item'>
      one
    </div>
    <div class='item'>
      one
    </div>
    <div class='item'>
      one
    </div>
    <div class='item'>
      one
    </div>
    <div class='item'>
      one
    </div>
    <div class='item'>
      one
    </div>
    <div class='item'>
      one
    </div>
    <div class='item'>
      one
    </div>
    
  </div>
</div>

CSS

.box {
  width: 100%;
  background-color: white;
  display: flex;
  flex-direction: row;
  align-items: stretch;
}
.row-item {
  opacity: 1;
  background: red;
  color: white;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}
.row-item.fifty {
  width: 50px;
}
.row-item.blue {
  background: blue;
}
.row-item.lg {
  flex-grow: 2;
}
.row-item.sm {
  flex-grow: 1;
}
.row-item .item {
  background: green;;
  padding: 20px 0;
  margin: 5px 0;
}

JavaScript

/*
http://codepen.io/michaelgearon/post/flexbox-guide

	flexbox:
  
  container {
  	display: -webkit-flex; /*Setting the container to flex*/
   display: flex;
  
   -webkit-flex-direction: row; /*Items inside the container into a row*/
   flex-direction: row;
  
   -webkit-align-items: center;  
   /*Center everything up  aligns items if they are in 1 row*/
   
   align-items: center;
   
   -webkit-justify-content: center;
   justify-content: center;
  
   /*Aligns the items to the right/end of the container
    -webkit-justify-content: flex-end;
   justify-content: flex-end;
   align-content: aligns entire children in multiple rows
   
   flex-wrap: wrap, nowrap (default), wrap-reverse
   
   
  }
  


*/