F L E X

by Leo Lanese

HTML

<div class="flex">
        
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    
</div>

<!-- 
VERSIONS:

Flexbox 2012 (A):
Opera 12.1+, Firefox 20+ 22+. Chrome 21 -webkit-

Flexbox 2012 (B):
Internet Explorer 10 -ms-

Flexbox 2009 (C):
Firefox 2+ -moz-, Chrome 4+ -webkit-, Safari 3.1+ -webkit-. iOS Safari 3.2+ -webkit-

-->

CSS

body {
    margin: 0;
    width: 100%; /* width needed for Firefox */  
    
    /* flexbox setup */
       display: -webkit-box;   /* 2009 OLD: Safari,  iOS, Android browser, older WebKit browsers.  */
       display: -moz-box;      /* 2009 OLD: Firefox (buggy) */ 
       display: -ms-flexbox;   /* 2011 MID: IE 10 */
       display: -webkit-flex;  /* 2012 NEW, Chrome 21+ */
       display: flex;          /* 2012 NEW: Opera 12.1, Firefox 22+ */    
   
    /* horizontal */
    -webkit-box-align: center;  /* 2009 OLD: flexbox: box-* */ 
       -moz-box-align: center;  /* 2009 OLD: flexbox: box-* */ 
       -ms-flex-align: center;  /* 2011 MID: flexbox: flex-* */
  -webkit-align-items: center;  /* 2012 NEW: flexbox  */
          align-items: center;  /* 2012 NEW: flexbox  */    

}

.flex {
    width: 100%;
    min-height: 22rem;
    font: 3vw Arial;
       
    display: -webkit-flex;  
}

.flex > div {    
    -moz-box-flex: 0;
     -webkit-flex: 1 1 auto; /* % = flex-glow, flex-shrink, flex initial width  */
         -ms-flex: 1 1 auto;   
    
    -webkit-transition: all 0.25s ease;
       -moz-transition: all 0.25s ease;
        -ms-transition: all 0.25s ease;
         -o-transition: all 0.25s ease;
            transition: all 0.2s ease;    
}

.flex > div:nth-child(1) {
      -webkit-order: 1; /* order the item should appear */ 
     -ms-flex-order: 1;
              order: 1;
     
    -webkit-align-self: flex-start;
   -ms-flex-item-align: start;
            align-self: flex-start;
}

.flex > div:nth-child(2) {
      -webkit-order: 2;
     -ms-flex-order: 2;
              order: 2;
    
 -webkit-align-self: center;
-ms-flex-item-align: center;
         align-self: center;
}

.flex > div:nth-child(3) {
      -webkit-order: 3;
     -ms-flex-order: 3;
              order: 3;
    
    -webkit-align-self: flex-end;
   -ms-flex-item-align: end;
            align-self: flex-end;
}

.flex > div:nth-child(4) {
  -webkit-order: 4;
 -ms-flex-order: 4;
          order:...

JavaScript

/*

flexbox:

"The CSS3 Flexible Box, or flexbox, is a layout mode providing for the arrangement of elements on a page such that the elements behave predictably when the page layout must accommodate different screen sizes and different display devices."

(Using CSS flexible boxes, developer.mozilla.org)

*/