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

Screen Shot 2015-04-09 at 3.10.04 PM

Screen Shot 2015-04-09 at 3.10.08 PM

 

Screen Shot 2015-04-09 at 3.10.17 PM Screen Shot 2015-04-09 at 3.10.25 PM

 

 

For more reference on the specification:
Posted in CSS, Design Pattern, HTML5, Web Technology Tagged with: , , ,

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

Recent Posts


Hit Counter provided by technology news