.flex-container {
    padding: 0;
    margin: 0;
    list-style: none;
    float: left;
    width: 120px;
    height: 300px;
    padding: 10px;
    border: 1px solid silver;
    margin-top: 100px;
    margin-left: 100px;
    
    -ms-box-orient: horizontal;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -moz-flex;
    display: -webkit-flex;
    display: flex;
    
    -webkit-flex-flow: row wrap;
    flex-flow: row wrap;
  }
  
  .flex-start { 
    -webkit-align-content: flex-start; 
    align-content: flex-start; 
  }
  
  .flex-end { 
    -webkit-align-content: flex-end; 
    align-content: flex-end; 
  }
  .flex-end li {
    background: gold;
  }
  
  .center { 
    -webkit-align-content: center; 
    align-content: center; 
  }
  .center li {
    background: deepskyblue;
  }
  
  .space-between { 
    -webkit-align-content: space-between; 
    align-content: space-between; 
  }  
  .space-between li {
    background: lightgreen;
  }
  
  .space-around { 
    -webkit-align-content: space-around; 
    align-content: space-around; 
  }
  .space-around li {
    background: hotpink;
  }
  
  .stretch { 
    -webkit-align-content: stretch; 
    align-content: stretch; 
  }
  .stretch li {
    background: chocolate;
  }
  
  .flex-item {
    background: tomato;
    padding: 5px;
    width: 50px;
    height: 50px;
    
    line-height: 50px;
    color: white;
    font-weight: bold;
    font-size: 2em;
    text-align: center;
  }