Flexbox attributes and values

flexbox-terminology.txt

Flex containers
Flex items

Main axis - size & direction
Cross axis - size & direction

Start & End

flexbox.scss

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

// http://weblog.bocoup.com/dive-into-flexbox/
// http://css-tricks.com/snippets/css/a-guide-to-flexbox/

.container {
  display: flex; // flex, inline-flex
  flex-direction: row; // row*, row-reverse, column, column-reverse

  
  // -- Distribution across axis
  
  // main axis
  justify-content: flex-start; // flex-start*, flex-end, center, space-between, space-around
  
  // cross axis
  align-items: stretch; // stretch*, flex-start, flex-end, center, baseline
  
  
  // -- Overflow into multiple rows
  
  flex-wrap: nowrap; // nowrap*, wrap, wrap-reverse
  
  // cross axis alignment
  align-content: stretch; // stretch*, flex-start, flex-end, center, space-between, space-around
}

// child properties
.container > div {
  
  // when this item is rendered. render order vs src order.
  order: 0; // e.g. -1, 1
  
  margin: auto; // magic alignment
  
  // override container's align-items
  align-self: flex-start; // flex-start*, flex-end, center, baseline, stretch
  
  // main axis sizing compared to others
  flex: 0 1 auto; // grow (0-n), shrink (0-n), basis (width)
}