Skip to content

Instantly share code, notes, and snippets.

@mertenvg

mertenvg/index.html

Created October 28, 2012 20:44
Show Gist options
  • Save mertenvg/3969848 to your computer and use it in GitHub Desktop.
Save mertenvg/3969848 to your computer and use it in GitHub Desktop.
Download ZIP
A CodePen by Merten van Gerven. CSS3 Flexible Box Layout
Raw
index.html
<html>
<head>
<title>CSS3 Flexible Box Layout</title>
</head>
<body>
<div id="container1">
<div id="box1"></div>
<div id="box2"></div>
</div>
<div id="container2">
<div id="box3"></div>
<div id="box4">
<button>Working!</button>
</div>
</div>
</body>
</html>
Raw
style.css
html, body { height: 100%; width: 100%; }
body {
display: -webkit-box;
-webkit-box-align: stretch;
-webkit-box-orient: horizontal;
}
#container1 {
width: 150px;
border: 1px solid black;
display: -webkit-box;
-webkit-box-align: stretch;
-webkit-box-orient: vertical;
}
#container2 {
border: 1px solid black;
-webkit-box-flex: 1;
display: -webkit-box;
-webkit-box-align: stretch;
-webkit-box-orient: vertical;
}
#container > div {
width: 25px;
}
#box1 {
background-color: red;
-webkit-box-flex: 1;
}
#box2 {
background-color: blue;
height: 25px;
}
#box3 {
background-color: red;
height: 25px;
}
#box4 {
background-color: blue;
-webkit-box-flex: 1;
display: -webkit-flex;
}
button {
margin: auto 10px 10px auto;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment