Cacher is the code snippet organizer for pro developers

/*
The main idea behind the flex layout is to give the container the ability to alter its items' 
width/height (and order) to best fill the available space (mostly to accommodate to all
kind of display devices and screen sizes). A flex container expands items to fill available
free space, or shrinks them to prevent overflow.
*/

// Using Flexbox
  // Define a parent element as Flex container
  // All child elements become Flex items
  // Flex properties then can control orientation, alignment, size, and spacing of child flex items
  // Containers are set to either row or column orientation
  
.flex-container {
	display: -webkit-flex;
	display: -ms-flexbox;
	display:flex;
}

// Flex axes
/*
If the flex container is set to display as a row, the main axis runs horizontally, 
while the cross axis runs vertically. If it's set to be a column, then the main axis is vertical
while the cross axis is horizontal.
values: row, column, column-reverse, row-reverse
  default: row
*/
.flex-container { 
  display:flex;
  
  -webkit-flex-direction: row;
	-ms-flex-direction: row;
	flex-direction: row;
}

// flex wrap
/*
By default all flexbox containers are single lined containers, and they will size, 
align and space your flex items along that one single line. 
If you want to have your flex items wrapped to a new line rather than overflow you're going to need
to use the flex wrap property.

values: wrap, wrap-reverse  (reverses the flex lines, not items)
*/

.flex-container {
  display:flex;
  flex-direction: row;
  
  -webkit-flex-wrap: wrap;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
}

// flex-flow 
// this is shorthand to combine flex-direction and flex-wrap
.flex-container { 
  -webkit-flex-flow: row wrap;
	-ms-flex-flow: row wrap;
	flex-flow: row wrap;
}

// flex property is a short-hand for flex-grow, flex-shrink, flex-basis
// These properties are used to define flex item size in relation to other flex items
// and how to grow or shrink (flex-shrink and flex-basis are optional)
// e.g. flex: 1 1 100px, where first value is flex-grow, then flex-shrink and then flex-basis

.flex-item {
  -webkit-flex: none | <flex-grow> <flex-shrink> || <flex-basis>
  -ms-flex: 
  flex: 
}
/*
What flex basis does for us is it doesn't define a size, a specific size, unless flex grow and flex shrink are zero.
So what flex basis does again, it defines sort of the starting point for the object, 
and then the size of the object is determined by the content and the amount of space
available to distribute between all of the objects.

in other words
flex-basis: the initial main size of the flex item, before free space is distributed according
to the flex factors.
<‘flex-basis’> accepts the same values as the width and height properties
(except that auto is treated differently) plus the 'content' keyword

If we have a flex basis of zero, notice that the size of the 
elements is determined by both the content and the available extra space.

If, on the other hand, we say a flex basis of auto, then content is ignored for the size of the
element, and the size of the element is controlled by the amount of available extra space.

flex-basis, default value is 0

*/
// the following is a further short-hand with flex-grow = 2, flex-shrink=1 (default), flex-basis=0 (default)

.flex-item {
  flex:2;
}

// note: A flex item is fully inflexible if both its flex-grow and flex-shrink values are zero,
// and flexible otherwise

// Main axis alignment
// justify-content: flex-start, flex-end, center, space-between, space-around
.flex-container {
  -webkit-justify-content: flex-start;
  -ms-flex-pack: start;
  justify-content: flex-start;
}
// flex-start is the default value, it places all flex-items at the begining of the container

// Cross axis alignment
// align-items: flex-start, flex-end, center, stretch, baseline
// default value: stretch
.flex-container {
  align-items: flex-start;
}

// align self - to align an individual item along the Cross axis
.item.self {
  align-self: flex-start;
}

//Note: margins don't collapse with flex items i.e. margins are used to calculate the size of the flex items
// though space-around and space-between properties ignore margins
// margin: auto with flex items can be used to distribute all the free space

// align-content - flex-start, flex-end, center, stretch, space-between, space-around
// align-content property allows us to control alignment of those multiple lines that you get, when you tell flex container to wrap
.flex-container {
  align-content: flex-start;
}

// ORDER flex items
// lower order number get displayed first 
// if two items have the same order number, the one first in the HTML will be displayed first
.item {
  -webkit-order: 2;
  order: 2;
}