Added cross-browser syntax for flexbox

stopsatgreen · May 4, 2013 · ab2cad1 · ab2cad1
1 parent 0f14696
commit ab2cad1
Show file tree

Hide file tree

Showing 2 changed files with 43 additions and 20 deletions.
diff --git a/Examples/Chapter 04/flexbox-alignment.html b/Examples/Chapter 04/flexbox-alignment.html
@@ -2,27 +2,41 @@
 <html>
 <head>
 <meta charset="utf-8">
-<title></title>
+<title>Flexbox alignment - Chapter 04</title>
 <style>
 body { font-size: 10px; }
 .flex {
 	border: 1px solid green;
+	display: -ms-flexbox;
+	display: -webkit-flex;
 	display: flex;
 	height: 100px;
 	margin: 0 auto;
 	width: 500px;
 }
 .flex-a {
+	-ms-flex-align: stretch;
+	-webkit-align-items: stretch;
 	align-items: stretch;
+	-ms-flex-pack: justify;
+	-webkit-justify-content: space-around;
 	justify-content: space-around;
 }
 .flex-b {
+	-ms-flex-align: end;
+	-webkit-align-items: flex-end;
 	align-items: flex-end;
-	justify-content: space-around;
 	border-width: 0 1px;
+	-ms-flex-pack: justify;
+	-webkit-justify-content: space-around;
+	justify-content: space-around;
 }
 .flex-c {
+	-ms-flex-align: center;
+	-webkit-align-items: center;
 	align-items: center;
+	-ms-flex-pack: justify;
+	-webkit-justify-content: space-around;
 	justify-content: space-around;
 }
 .flex div {

diff --git a/Examples/Chapter 04/flexbox.html b/Examples/Chapter 04/flexbox.html
@@ -1,31 +1,40 @@
 <!DOCTYPE HTML>
 <html>
 <head>
-<meta charset="utf-8">
-<title></title>
-<style>
-body { font-size: 10px; }
-#flex {
-	display: flex;
-	flex-direction: row-reverse;
-	margin: 0 auto;
-	outline: 1px solid green;
-	width: 400px;
-}
-h2, p { margin: 0; }
-p { font-size: 1.2em; }
-.child { box-sizing: border-box; padding: 1em; }
-.child1 { background-color: #ddd; }
-</style>
+	<meta charset="utf-8">
+	<title>Flexbox - Chapter 04</title>
+	<link rel="stylesheet" href="../bootstrap/css/bootstrap.css">
+	<style>
+		body { font-size: 10px; }
+		#flex {
+			display: -ms-flexbox;
+			display: -webkit-flex;
+			display: flex;
+			-ms-flex-direction: row-reverse;
+			-webkit-flex-direction: row-reverse;
+			flex-direction: row-reverse;
+			margin: 0 auto;
+			outline: 1px solid green;
+			width: 400px;
+		}
+		h2, p { margin: 0; }
+		p { font-size: 1.2em; }
+		.child {
+			-moz-box-sizing: border-box;
+			box-sizing: border-box;
+			padding: 1em;
+		}
+		.child1 { background-color: #ddd; }
+	</style>
 </head>
 <body>
 <div id="flex">
 	<div class="child child1">
-		<h2>1. Understand Yourself and Others</h2>
+		<h3>1. Understand Yourself and Others</h3>
 		<p>So long as you live in a civilized or thickly populated community you will still need to understand your own nature and the natures of other people.</p>
 	</div>
 	<div class="child child2">
-		<h2>2. Primitive Problems</h2>
+		<h3>2. Primitive Problems</h3>
 		<p>In primitive times people saw each other rarely and had much less to do with each other. The human element was then not the chief problem.</p>
 	</div>
 </div>