Flex-box test

by AsciiSmoke

HTML

<div class="flex-grid" style="">

  <div class="itemWrapper"><div class="item">item</div></div>
  <div class="itemWrapper"><div class="item">item</div></div>
  <div class="itemWrapper"><div class="item">item</div></div>
  <div class="itemWrapper"><div class="item">item</div></div>
  <div class="itemWrapper"><div class="item">item</div></div>
  <div class="itemWrapper"><div class="item">item</div></div>
  <div class="itemWrapper"><div class="item">item</div></div>
  <div class="itemWrapper"><div class="item">item</div></div>
  <div class="itemWrapper"><div class="item">item</div></div>
  <div class="itemWrapper"><div class="item">item</div></div>
  <div class="itemWrapper"><div class="item">item</div></div>
  <div class="flex-padout"> </div>
  
</div>

CSS

.flex-grid{
  padding: 0;
  margin: 0;
  list-style: none;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-flow: row wrap;
  justify-content: flex-start;
  margin:0 auto;
  background:#87f;
  
}

.itemWrapper{  
    flex-grow: 0;
    margin: 1%;
    margin-bottom:10px;
    width: 18%;
    height:80px;
    max-width: 480px;
    min-width: 200px;
    background:#fda;
}

.flex-padout{
  display:none;
}