• vertical and horizontal alignment regardless of device and screen size!
• streching, squeezing, equal heights and changing order elements
• Browser support! caniuse flexbox
  (Old versions of IE (9) and Opera (12) Touch: Opera Mini, don't support flexbox)
• Older versions are very slow!
  Paul Irish Speed Test

• new: display: flex
• tweener (unofficial syntax from 2012, adopted only by IE 10): display: -ms-flexbox
• old: display: box

                .parent  {
                  display: flex;
                  /* or inline-flex */
                }
                 .child  {
                   flex: 1;
                }
            

            
                .parent  {
                  display: flex; 
                  /* or inline-flex */

                  flex-direction: row | row-reverse | column | column-reverse;
                  
                  flex-wrap: nowrap | wrap | wrap-reverse; /* poor BS */
                  
                  justify-content: flex-start | flex-end | center | space-between | space-around;
                  
                  align-items: flex-start | flex-end | center | baseline | stretch;
                  
                  align-content: flex-start | flex-end | center | space-between | space-around | stretch;
                }

                /* flex-flow: [flex-direction] || [flex-wrap]; */
                /* default: row nowrap */
            
        

            
                .child  {
                  flex: [flex-grow] [flex-shrink] [flex-basis]; /* recommended */
                  /* default: 0 1 auto */

                  order: [integer];

                  align-self: auto | flex-start | flex-end | center | baseline | stretch;
                }
            
        

• flex-grow [0] - defines the ability for a flex item to grow if necessary
• flex-shrink [1] - defines the ability for a flex item to shrink if necessary
• flex-basis [auto] - defines the default size of an element before the remaining space is distributed w3 graphic