sporkmonger · September 18, 2011 19:37
diff --git a/flexbox.html b/flexbox.html
 <!DOCTYPE html>
 <html>
  <head>
    <title>Flexbox Layout</title>
    <style>
      article {
        border: 1px solid red;
        display: -webkit-box;
        display: -moz-box;
        display: box;
        width: 80%;
        margin: 0 auto;
      }
      #column-1 {
        border: 1px solid green;
        width: 300px;
        padding: 20px;
      }
      #column-2 {
        border: 1px solid blue;
        padding: 20px;
        -webkit-box-flex: 1;
        -moz-box-flex: 1;
        box-flex: 1;
      }
      #column-3 {
        border: 1px solid yellow;
        padding: 20px;
        -webkit-box-flex: 1;
        -moz-box-flex: 1;
        box-flex: 1;
      }
    </style>
  </head>
  <body>
    <article>
      <div id="column-1">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
        eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
        ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
        aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit
        in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
        Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
        officia deserunt mollit anim id est laborum.
      </div>
      <div id="column-2">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
        eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
        ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
        aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit
        in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
        Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
        officia deserunt mollit anim id est laborum.
      </div>
      <div id="column-3">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
        eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
        ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
        aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit
        in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
        Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
        officia deserunt mollit anim id est laborum.
      </div>
    </article>
  </body>
 </html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>Flexbox Layout</title>
	<style>
	article {
	border: 1px solid red;
	display: -webkit-box;
	display: -moz-box;
	display: box;
	width: 80%;
	margin: 0 auto;
	}
	#column-1 {
	border: 1px solid green;
	width: 300px;
	padding: 20px;
	}
	#column-2 {
	border: 1px solid blue;
	padding: 20px;
	-webkit-box-flex: 1;
	-moz-box-flex: 1;
	box-flex: 1;
	}
	#column-3 {
	border: 1px solid yellow;
	padding: 20px;
	-webkit-box-flex: 1;
	-moz-box-flex: 1;
	box-flex: 1;
	}
	</style>
	</head>
	<body>
	<article>
	<div id="column-1">
	Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
	eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
	ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
	aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit
	in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
	Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
	officia deserunt mollit anim id est laborum.
	</div>
	<div id="column-2">
	Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
	eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
	ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
	aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit
	in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
	Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
	officia deserunt mollit anim id est laborum.
	</div>
	<div id="column-3">
	Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
	eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
	ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
	aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit
	in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
	Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
	officia deserunt mollit anim id est laborum.
	</div>
	</article>
	</body>
	</html>