RockyMyx/flex-start.html

## flex-start.html
<!doctype html>
<html lang="en">
<head>
<title>Flexbox Layout Demo</title>

<meta charset="utf-8">
<meta name="description" content="" />

<style type="text/css">
/* from: http://www.adobe.com/devnet/html5/articles/working-with-flexbox-the-new-spec.html?utm_source=CSS-Weekly&utm_campaign=Issue-51&utm_medium=email*/

* {
  box-sizing: border-box;
}

body {
  font-family: helvetica;
  font-size: 1em;
  margin: 0;
  padding: 0;
}

p {
  margin: 0;
  padding: 1em 5%;
}

ul {
  margin: 1em 5%;
  padding: 0;
}

.flex-container {
  max-width: 75em;
  margin: 0 auto;
}

.header {
  width: 100%;
  background: #555;
  color: #eee;
  padding: 1em 0;
}

.content {
  width: 100%;
  background: #eee;
  padding: 1em 0;
}

.sidebar {
  width: 100%;
  padding: 1em 0;
}

.primary {
  background: #ccc;
}

.secondary {
  background: #bbb;
}

.footer {
  width: 100%;
  background: #444;
  color: #eee;
  padding: 1em 0;
}

/* ----------- flex styles ----------- */

.flex-container{
	display: flex;
	display: -webkit-flex;
	-webkit-flex-flow: row wrap;
	flex-flow: row wrap;
}
.header {
  -webkit-order: 1;
  order: 1;
}

.content {
  -webkit-order: 2;
  order: 2;
}

.primary {
  -webkit-order: 3;
  order: 3;
}

.secondary {
  -webkit-order: 4;
  order: 4;
}

.footer {
  -webkit-order: 5;
  order: 5;
}

</style>

</head>

<body>

<div class="flex-container">
	<div class="header"><p>Header</p></div>
	<div class="content">
		<p>Main Content</p>
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse vel libero ac enim imperdiet commodo et ac nunc. Suspendisse vitae neque pharetra est ornare tincidunt non eget arcu. Vivamus cursus faucibus elit ut laoreet. Nunc nec ante faucibus metus viverra egestas.</p>
		<p>Aenean nulla mauris, imperdiet ac mattis volutpat, viverra quis elit. Aliquam erat volutpat. Nulla venenatis quam vitae metus rhoncus quis sollicitudin enim dignissim. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris eget fringilla diam</p>
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus eget purus eu odio auctor rhoncus. Donec eget orci neque. Sed tristique, turpis ut congue commodo, lectus erat fermentum erat, in scelerisque elit dolor vel sapien.</p>
		<p>Integer ultricies sem id elit tincidunt sed rutrum lorem mollis. Proin tincidunt, quam a suscipit posuere, sem lorem hendrerit risus, eu gravida urna turpis vitae ligula. Integer est nunc, luctus eget interdum et, interdum quis lorem. </p>
	</div>
	<div class="sidebar primary">
		<p>Primary Sidebar</p>
		<ul>
			<li>Lorem ipsum dolor sit amet</li>
			<li>Aenean viverra mi quis felis</li>
			<li>Quisque ut odio mi, blandit</li>
			<li>Fusce lacinia aliquet purus</li>
			<li>Aliquam vestibulum libero</li>
		</ul>
	</div>
	<div class="sidebar secondary"><p>Secondary Sidebar</p></div>
	<div class="footer"><p>Footer</p></div>
</div>

</body>
</html>
	<!doctype html>
	<html lang="en">
	<head>
	<title>Flexbox Layout Demo</title>

	<meta charset="utf-8">
	<meta name="description" content="" />

	<style type="text/css">
	/* from: http://www.adobe.com/devnet/html5/articles/working-with-flexbox-the-new-spec.html?utm_source=CSS-Weekly&utm_campaign=Issue-51&utm_medium=email*/

	* {
	box-sizing: border-box;
	}

	body {
	font-family: helvetica;
	font-size: 1em;
	margin: 0;
	padding: 0;
	}

	p {
	margin: 0;
	padding: 1em 5%;
	}

	ul {
	margin: 1em 5%;
	padding: 0;
	}

	.flex-container {
	max-width: 75em;
	margin: 0 auto;
	}

	.header {
	width: 100%;
	background: #555;
	color: #eee;
	padding: 1em 0;
	}

	.content {
	width: 100%;
	background: #eee;
	padding: 1em 0;
	}

	.sidebar {
	width: 100%;
	padding: 1em 0;
	}

	.primary {
	background: #ccc;
	}

	.secondary {
	background: #bbb;
	}

	.footer {
	width: 100%;
	background: #444;
	color: #eee;
	padding: 1em 0;
	}

	/* ----------- flex styles ----------- */

	.flex-container{
	display: flex;
	display: -webkit-flex;
	-webkit-flex-flow: row wrap;
	flex-flow: row wrap;
	}
	.header {
	-webkit-order: 1;
	order: 1;
	}

	.content {
	-webkit-order: 2;
	order: 2;
	}

	.primary {
	-webkit-order: 3;
	order: 3;
	}

	.secondary {
	-webkit-order: 4;
	order: 4;
	}

	.footer {
	-webkit-order: 5;
	order: 5;
	}

	</style>

	</head>

	<body>

	<div class="flex-container">
	<div class="header"><p>Header</p></div>
	<div class="content">
	<p>Main Content</p>
	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse vel libero ac enim imperdiet commodo et ac nunc. Suspendisse vitae neque pharetra est ornare tincidunt non eget arcu. Vivamus cursus faucibus elit ut laoreet. Nunc nec ante faucibus metus viverra egestas.</p>
	<p>Aenean nulla mauris, imperdiet ac mattis volutpat, viverra quis elit. Aliquam erat volutpat. Nulla venenatis quam vitae metus rhoncus quis sollicitudin enim dignissim. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris eget fringilla diam</p>
	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus eget purus eu odio auctor rhoncus. Donec eget orci neque. Sed tristique, turpis ut congue commodo, lectus erat fermentum erat, in scelerisque elit dolor vel sapien.</p>
	<p>Integer ultricies sem id elit tincidunt sed rutrum lorem mollis. Proin tincidunt, quam a suscipit posuere, sem lorem hendrerit risus, eu gravida urna turpis vitae ligula. Integer est nunc, luctus eget interdum et, interdum quis lorem. </p>
	</div>
	<div class="sidebar primary">
	<p>Primary Sidebar</p>
	<ul>
	<li>Lorem ipsum dolor sit amet</li>
	<li>Aenean viverra mi quis felis</li>
	<li>Quisque ut odio mi, blandit</li>
	<li>Fusce lacinia aliquet purus</li>
	<li>Aliquam vestibulum libero</li>
	</ul>
	</div>
	<div class="sidebar secondary"><p>Secondary Sidebar</p></div>
	<div class="footer"><p>Footer</p></div>
	</div>

	</body>
	</html>