cameronjacobson/flex.html

## flex.html
<!DOCTYPE html>
<html lang="en">
 <head>
<link rel="stylesheet" href="normalize.css">
<style>
.flex {
  height:200px;
  margin-right:5px;

  // DEFINES FLEX CONTEXT FOR IMMEDIATE CHILDREN
  display:flex;//flex,inline-flex

  // SETS "main-axis"
  flex-direction: row;//row,row-reverse,column,column-reverse

  // CAN ITEMS WRAP?
  flex-wrap: nowrap;//nowrap,wrap,wrap-reverse

  // ALIGNMENT OF 'main-axis'
  justify-content: center;//flex-start,flex-end,center,space-between,space-around

  // LAYOUT OF 'cross-axis'
  align-content: center;//flex-start,flex-end,center,space-between,space-around,stretch

  // ALIGNMENT OF LINES ON 'cross-axis'
  align-items: center;//flex-start,flex-end,center,baseline,stretch
}

.flex .item {
  background-color: #eee;
  border:1px solid #ccc;
  margin:5px 0px 5px 5px;
  min-width:20px;
  min-height:20px;
  padding:5px;

  // DEFINE ORDER ITEMS APPEAR ON 'main-axis'
  //order:<integer>;

  // RATE OF GROWTH OF ITEMS
  flex-grow: 1;//relative growth of item

  // RATE OF SHRINKAGE OF ITEMS
  flex-shrink: 1;//relative shrinkage of item

  // DEFAULT SIZE OF ITEM
  flex-basis: auto;//'main-size|auto' OR a valid size (ie. '%', 'px')

  // TO OVERRIDE DEFAULT align-items VALUE
  // align-self: auto;//auto,flex-start,flex-end,center,baseline,stretch,inherit
}

</style>
 </head>
 <body>
 <div class="flex">
  <div class="item">a</div>
  <div class="item">b</div>
  <div class="item">c</div>
 </div>
 </body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<link rel="stylesheet" href="normalize.css">
	<style>
	.flex {
	height:200px;
	margin-right:5px;

	// DEFINES FLEX CONTEXT FOR IMMEDIATE CHILDREN
	display:flex;//flex,inline-flex

	// SETS "main-axis"
	flex-direction: row;//row,row-reverse,column,column-reverse

	// CAN ITEMS WRAP?
	flex-wrap: nowrap;//nowrap,wrap,wrap-reverse

	// ALIGNMENT OF 'main-axis'
	justify-content: center;//flex-start,flex-end,center,space-between,space-around

	// LAYOUT OF 'cross-axis'
	align-content: center;//flex-start,flex-end,center,space-between,space-around,stretch

	// ALIGNMENT OF LINES ON 'cross-axis'
	align-items: center;//flex-start,flex-end,center,baseline,stretch
	}

	.flex .item {
	background-color: #eee;
	border:1px solid #ccc;
	margin:5px 0px 5px 5px;
	min-width:20px;
	min-height:20px;
	padding:5px;

	// DEFINE ORDER ITEMS APPEAR ON 'main-axis'
	//order:<integer>;

	// RATE OF GROWTH OF ITEMS
	flex-grow: 1;//relative growth of item

	// RATE OF SHRINKAGE OF ITEMS
	flex-shrink: 1;//relative shrinkage of item

	// DEFAULT SIZE OF ITEM
	flex-basis: auto;//'main-size\|auto' OR a valid size (ie. '%', 'px')

	// TO OVERRIDE DEFAULT align-items VALUE
	// align-self: auto;//auto,flex-start,flex-end,center,baseline,stretch,inherit
	}

	</style>
	</head>
	<body>
	<div class="flex">
	<div class="item">a</div>
	<div class="item">b</div>
	<div class="item">c</div>
	</div>
	</body>
	</html>