Flexbox for responsive layout

Flexbox Layout provides a more efficient way to lay out, align and distribute space among items in a container, even when their size is unknown and/or dynamic
Here is a sample code, its very simple spec where no need to have any logic in js/css media queries to dynamically calculate the space and resize the parent container.

The HTML

<section >
 < div class="items" >
   < div class="item" >1</div>
   < div class="item" >2</div>
   < div class="item" >3</div>
   < div class="item" >4</div>
   < div class="item" >5</div>
   < div class="item" >6</div>
   < div class="item" >7</div>
   < div class="item" >8</div>
 </div>
</section>

The CSS

.items {
  -webkit-justify-content: center;
  -webkit-align-items:center;
  -webkit-align-content: center;
  display: -webkit-flex;
  -webkit-flex-flow: row wrap;
   margin: 0px auto;
   margin-top: 10%;
   max-width: 1160px;
}
.item{
  margin: 10px 5px 0px 5px;
  width: 250px;
  height: 250px;
  -webkit-align-self: auto;
  line-height: 150px;
  border:0.5px solid black;
}                      

The RESULT

This slideshow requires JavaScript.