FlexBox - Examples

by Cristofer Sousa

HTML

<div class="main">
    <div class="primeiroDiv">Primeiro div</div>
    <div class="segundoDiv">Segundo div</div>
    <div class="terceiroDiv">Terceiro div</div>
</div>

CSS

.main {
   width:500px;
   height:500px;
   background:#EFEFEF;
   display: -webkit-flex;
   display: -webkit-flex;
   display: -moz-flex;
   display: -ms-flex;
   display: -o-flex;
   display: flex;
      -webkit-flex-flow: column;
    -moz-flex-flow: column;
    -ms-flex-flow: column;
    -o-flex-flow: column; 
    flex-flow: column;
}


.main div {
    background:#CCC;
    margin:10px;
    -webkit-flex:1 1 auto;
    flex:1 1 auto;
}

.main div.primeiroDiv {-webkit-order:2;}
.main div.segundoDiv {-webkit-order:3;}
.main div.terceiroDiv {-webkit-order:1;}