Flex

Html

<div class="container">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

Container styles

.container {
   // make the container a flex box 
   display: flex | inline-flex; 
   
   // direction default row
   flex-direction: row | row-reverse | column | column-reverse;
   
   // wrap default nowrap
   flex-wrap: nowrap | wrap | wrap-reverse;
   
   // you can combine direction and wrap
   flex-flow: <flex-direction>  <flex-wrap>
}

Content management

.container {
   // align items across the primary axis defaults to 
   // flex-start(left if row)
   justify-content:  flex-start | flex-end | center 
                     | space-between | space-around
   
   // allign items across the secondary axis default to streach
   align-items: flex-start | flex-end | center | baseline  
                | stretch
   
   // allign the lines of items (content of the container) 
   // when in wrap mode defaults to streach
   align-content: flex-start | flex-end | center | space-between 
                  | space-around | stretch;  
}

Item styles

.items{
  // in which order the item will apear defaults to 0 
  order: <negative integer> | 0 | <positive integer>
  
  // overwrites align-items (secondary axis alignment)
  align-self: auto | flex-start | flex-end | center 
              | baseline | stretch;
}

Item size

  // defaults to 0
  flex-grow: <integer> 
  
  // defaults to 1
  flex-shrink: <integer>
  
  // defaults to auto
  flex-basis: auto | px | % | em | etc
  
  // combined
  flex: none | [ <flex-grow> <flex-shrink>? || <flex-basis> ]