Dive into Flexbox

Examples:
CSS Flexbox Please!
Solved By Flexbox — Cleaner, hack-free CSS

Intro Guide:
Dive into Flexbox
Using the CSS3 flexbox layout
A Guide to Flexbox
弹性框布局

Further Reading:
W3C Last Call Working Draft, 25 September 2014

Browser Compatibility & Some Outdated Stuff:
Flexbox / Flexible Box Layout Browser Support
Working with flexbox: The new specification
Advanced Cross-Browser Flexbox
IE 10 中弹性框布局

Properties for the Parent (flex container)

display
flex | inline-flex
.flexbox {
  display: -webkit-box;  /* Old Safari */
  display: -webkit-flex; /* Safari 6.1+ */
  display: -ms-flexbox;  /* IE 10 */
  display: flex;
 }
flex-flow
<flex-direction> || <flex-wrap>
flex-direction
row | row-reverse | column | column-reverse
  flex-direction: row; /*Initial*/
flex-wrap
nowrap | wrap | wrap-reverse
  flex-wrap: nowrap; /*Initial*/
justify-content
flex-start | flex-end | center | space-between | space-around
  justify-content: flex-start; /*Initial*/
.flexbox {
  -webkit-justify-content: space-between; /* Safari 6.1+ */
  -ms-flex-pack: justify; /* IE 10 */
  justify-content: space-between;
 }
align-items
flex-start | flex-end | center | baseline | stretch
  align-items: stretch; /*Initial*/
.flexbox {
	-webkit-align-items: center; /* Safari 7.0+ */
	-ms-flex-align: center; /* IE 10 */
	align-items: center;
 }
align-content
flex-start | flex-end | center | space-between | space-around | stretch
  align-content: stretch; /*Initial*/

Properties for the Children (flex items)

Note that float, clear and vertical-align have no effect on a flex item.

order
<integer>
  order: 0; /*Initial*/
flex
none | [<flex-grow> <flex-shrink>? || <flex-basis>]
  flex: 0 1 main-size; /*Initial*/
  flex: 0 main-size;
  flex: initial;
/* Equivalent to `flex: 0 1 main-size` (Initial). Sizes the item based on the 'width'/'height' properties. (If the item's main size property computes to auto, this will size the flex item based on its contents.) Makes the flex item inflexible when there is positive free space, but allows it to shrink to its min-size when there is insufficient space. The alignment abilities or auto margins can be used to align flex items along the main axis. */

  flex: auto;
/* Equivalent to `flex: 1 1 main-size`. Sizes the item based on the 'width'/'height' properties, but makes them fully flexible, so that they absorb any free space along the main axis. If all items are either `flex: auto`, `flex: initial`, or `flex: none`, any positive free space after the items have been sized will be distributed evenly to the items with `flex: auto`. */

  flex: none;
/* Equivalent to `flex: 0 0 main-size`. This value sizes the item according to the 'width'/'height' properties, but makes the flex item fully inflexible. This is similar to `initial`, except that flex items are not allowed to shrink, even in overflow situations. */

  flex: <positive-number>;
/* Equivalent to `flex: <positive-number> 1 0%`. Makes the flex item flexible and sets the flex basis to zero, resulting in an item that receives the specified proportion of the free space in the flex container. If all items in the flex container use this pattern, their sizes will be proportional to the specified flex factor. */

</div>

align-self
auto | flex-start | flex-end | center | baseline | stretch
  align-self: auto; /*Initial*/
Written on October 25, 2014