Container

Element in where the flexible items are placed.

display

							.container {

	display: flex; /* or inline-flex */

}
						

flex-direction

							.container {

 	flex-direction: row | row-reverse | column | column-reverse;

}
						

flex-wrap

							.container{

  flex-wrap: nowrap | wrap | wrap-reverse;

}
						

flex-flow

This is a shorthand flex-direction and flex-wrap properties.

justify-content

							.container {

  justify-content: flex-start | flex-end | center | space-between | space-around;

}
						

align-items

							.container {

  align-items: flex-start | flex-end | center | baseline | stretch;

}
						

align-content

							.container {

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

Items

Flexible items within a container with a flex display.

order

							.item {
  order: [integer];
}
						

flex-grow

							.item {
  flex-grow: [number]; /* default 0 */
}
						

flex-shrink

This defines the ability for a flex item to shrink if necessary.

							.item {
  flex-shrink: [number]; /* default 1 */
}
						

flex-basis

This defines the default size of an element before the remaining space is distributed.

							.item {
  flex-basis: [length] | auto; /* default auto */
}
						

flex

This is the shorthand for flex-grow, flex-shrink and flex-basis combined.

							.item {
  flex: none | [ ['flex-grow'] ['flex-shrink']? || ['flex-basis'] ] /* default 0 1 auto */
}
						

align-self

							.item {
  align-self: auto | flex-start | flex-end | center | baseline | stretch;
}
						

Prefixes

							.page-wrap {
  display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
  display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
  display: -ms-flexbox;      /* TWEENER - IE 10 */
  display: -webkit-flex;     /* NEW - Chrome */
  display: flex;             /* NEW, Spec - Opera 12.1, Firefox 20+ */
 }
						

							.main-content {
  width: 60%;
}
.main-nav,
.main-sidebar {
  -webkit-box-flex: 1;      /* OLD - iOS 6-, Safari 3.1-6 */
  -moz-box-flex: 1;         /* OLD - Firefox 19- */
  width: 20%;               /* For old syntax, otherwise collapses. */
  -webkit-flex: 1;          /* Chrome */
  -ms-flex: 1;              /* IE 10 */
  flex: 1;                  /* NEW, Spec - Opera 12.1, Firefox 20+ */
}
						

							.main-content {
  -webkit-box-ordinal-group: 2;   /* OLD - iOS 6-, Safari 3.1-6 */
  -moz-box-ordinal-group: 2;      /* OLD - Firefox 19- */
  -ms-flex-order: 2;              /* TWEENER - IE 10 */
  -webkit-order: 2;               /* NEW - Chrome */
  order: 2;                       /* NEW, Spec - Opera 12.1, Firefox 20+ */
}
.main-nav {
  -webkit-box-ordinal-group: 1;  
  -moz-box-ordinal-group: 1;     
  -ms-flex-order: 1;     
  -webkit-order: 1;  
  order: 1;
}
.main-sidebar {
  -webkit-box-ordinal-group: 3;  
  -moz-box-ordinal-group: 3;     
  -ms-flex-order: 3;     
  -webkit-order: 3;  
  order: 3;
}
						

Fallback

Modernizr

							/* legacy Flexbox fallback */

.no-flexbox section {
	display: -webkit-box;
	display: -moz-box;

	-webkit-box-orient: horizontal;
	-moz-box-orient: horizontal;
}

.no-flexbox nav {
	padding: 1rem;
	width: 20%;
}

.no-flexbox article {
	-webkit-box-flex: 1;
	-moz-box-flex: 1;
}

.no-flexbox article p {
	float: left;
}

.no-flexbox article img {
	display: block;
	width: 200px;
}
						

							.no-flexbox-legacy nav, .no-flexbox-legacy article {
	float: left;
}

.no-flexbox-legacy nav {
	width: 20%;
}

.no-flexbox-legacy article {
	width: 36%;
}

.no-flexbox article img {
	float: left;
}
						

Examples