CSS Flexbox explained with examples

The CSS flexbox layout is the widely discussed/suggested/encouraged/used layout of these days. You must be wondering why? Why is that many developers give that ah! look when they are advised to use flexbox? Well, it's because it provides the most efficient way of aligning, resizing, stretching the elements in the most appropriate way. It is a big help in laying out the dynamic layouts, because it stretches and shrinks depending on the available space. No JavaScript required.

Browser Support to flexbox: http://caniuse.com/#search=flex

Here are some examples with the use cases:

1. Vertically center align content with CSS flexbox: (align-items: center | justify-content: center; )
Demo: http://jsfiddle.net/k72uf/

Vertically center aligning the content with CSS has been always a big issue for developers. From IE8 and above they could use display: table-cell; property, but the new and fancy flexbox gives more flexible way of vertically center aligning content. Here is the code:

.flex-container{
  display: flex; 
  justify-content: center; 
  align-items: center; 
  height: 350px; 
  background: LightSeaGreen; 
}

2. Flex Directions: (flex-direction: row | row-reverse | column | column-reverse;)

flex-direction: row; Demo: http://jsfiddle.net/x83Pu/ 

.flex-container{ 
  display: flex;
  flex-direction: row;
  border: 2px solid SaddleBrown; 
}
.flex-container div{
  width: 100px; 
  height: 100px; 
  margin: 4px; 
  background: chocolate;
}
.wrap{
  flex-wrap: wrap; 
  flex-flow: row wrap;
}

flex-direction: row-reverse; Demo: http://jsfiddle.net/7UBTL/1/

.flex-container{
  display: flex; 
  flex-direction: row-reverse;
}

flex-direction: column; Demo: http://jsfiddle.net/C3rdD/

.flex-container{ 
  display: flex; 
  flex-direction: column; 
  height: 350px;
  border: 2px solid SaddleBrown; 
}
.flex-container div{
  width: 50px; 
  height: 50px; 
  margin: 4px; 
  background: chocolate; 
}
.wrap{
  flex-wrap: wrap; 
  align-content: flex-start;
}

The reverse property for columns works same as the row-reverse.

3. Item orders: (order: integer)
By default the flex items are placed in source code order. The order property helps in controlling the order by which the child elements are placed in the flex container.
Demo: http://jsfiddle.net/z96C7/

.container{
  display: flex; 
  flex-direction: row; 
  border: 2px solid SaddleBrown;
}
.container *{ 
  background: ForestGreen; 
  color: white; 
  margin: 4px;
  flex-basis: 100px;
}
.container header{ order: 3; } 
.container nav{ order: 1; }
.container article{ order: 2; }

4. Alignments: (justify-content | align-items | align-self)

justify-content: (flex-start | flex-end | center | space-between | space-around | inherit)
Demo: http://jsfiddle.net/Kj9KY/

.flex{
  display: flex; 
  margin: 0 0 30px 0;
  border: 2px solid ForestGreen;
}
.flex div{ 
  background: OliveDrab; 
  color: white; 
  width: 50px; 
  height: 50px; 
  margin: 4px; 
}

.start{ justify-content: flex-start; }
.end{ justify-content: flex-end; }
.center{ justify-content: center; }
.space-between{ justify-content: space-between; }
.space-around{ justify-content: space-around; }

align-items: (flex-start | flex-end | center | baseline | stretch)
Demo: http://jsfiddle.net/2x4Xq/1/

.flex{
  display: flex; 
  flex-direction: column;
  margin: 0 0 30px 0; 
  height: 300px;
  border: 2px solid ForestGreen;
}
.flex div{  
  background: OliveDrab; 
  color: white; 
  height: 50px; 
  width: 50px; 
  margin: 4px; 
}

.start{ align-items: flex-start; }
.end{ align-items: flex-end; }
.center{ align-items: center; }
.baseline{ align-items: baseline; }
.stretch{ align-items: stretch; }

5. flex-basis:
It specifies the initial size of the flex items. But, its behavior depends on the flex-direction property. If the flex-direction is set to row--the initial size works as width, and if the direction is set to column--the initial size works as column.
Demo: http://jsfiddle.net/3Lamd/

.flex{
  display: flex; /*flex-direction: row;*/
  border: 2px solid ForestGreen; 
  margin: 0 0 30px 0;
}
.flex div{  
  flex-basis: 100px;
  background: OliveDrab;
  color: white; 
  margin: 4px; 
}
.column{ flex-direction: column;  }

6. flex-grow:
Demo: http://jsfiddle.net/V7hA3/

.flex{
  display: flex; 
  border: 2px solid ForestGreen;
}
.flex div{  
  flex-basis: 50px;
  background: OliveDrab; 
  color: white; 
  margin: 4px; 
}
.grow{ flex-grow: 3; }

7. flex-shrink:
Demo: http://jsfiddle.net/GyBjQ/

.flex{
  display: flex; 
  border: 2px solid ForestGreen;
}
.flex div{  
  flex-basis: 200px;
  background: OliveDrab; 
  color: white; 
  margin: 4px;
}
.shrink{ flex-shrink: 3; }

There are a few more properties like: align-self | flex-wrap | flex-flow. I have used some of these properties in the examples above, I will put some examples of these soon possible.