Cacher is the code snippet organizer for pro developers

/*
  https://demos.scotch.io/visual-guide-to-css3-flexbox-flexbox-playground/demos
  https://css-tricks.com/snippets/css/a-guide-to-flexbox/
  
  https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout
*/


/* Parent */

display:            flex | inline-flex

flex-direction:     row | row-reverse | column | column-reverse

flex-wrap:          nowrap | wrap | wrap-reverse

flex-flow:          row nowrap /* shorthand for "flex-direction flex-wrap" */

justify-content:    flex-start | flex-end | center | space-between | space-around

align-items:        stretch | flex-start | flex-end | center | baseline /* vertically align items */

align-content:      stretch | flex-start | flex-end | center | space-between | space-around


/* 
  Child 
  https://developer.mozilla.org/en-US/docs/Web/CSS/flex
*/

order:              <integer>;        /* default is 0 */

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

flex-grow:          <number>;         /* default 0 */
flex-shrink:        <number>;         /* default 1 */
flex-basis:         <length> | auto;  /* default auto | simular to min-width */


/* flex short hand */

flex: 0 1 auto;

flex: auto                /* equivalent to: flex: 1 1 auto */
flex: initial             /* equivalent to: flex: 0 1 auto */
flex: none                /* equivalent to: flex: 0 0 auto */
flex: <positive-number>   /* equivalent to: flex: 1 0 */

flex: 2                   /* One value, unitless number: flex-grow */
flex: 10em | 30px         /* One value, width/height: flex-basis */
flex: 1 30px              /* Two values: flex-grow | flex-basis */
flex: 2 2                 /* Two values: flex-grow | flex-shrink */
flex: 2 2 10%             /* Three values: flex-grow | flex-shrink | flex-basis */

/* Basic values */
flex: auto | initial | none | 2

/* Global values */
flex: inherit | initial | unset