A new CSS box model
Johan Wallin
2013-11-20
display:flex;
.example-container {
display: flex;
}
.example-item {
flex: 1;
}
.example-container {
display: flex;
}
.example-item {
flex: 1;
}
.example-item-wide {
flex:none;
width:50%;
}
.example-container {
display: flex;
flex-direction: column;
}
.example-container {
display: flex;
flex-wrap: wrap;
}
.example-item {
flex: 1 0 100px;
}
See example
body {
display: flex;
flex-direction: column;
}
main {
flex:1;
}
footer {
}
main {
display: flex;
align-items: center;
justify-content: center;
}
<body class="holy-grail">
<header>Header</header>
<div class="content">
<main role="main">Main</main>
<nav>Navigation</nav>
<aside>Sidebar</aside>
</div>
<footer>Footer</footer>
</body>
.holy-grail {
display: flex;
flex-direction: column;
}
.content {
display: flex;
flex: 1;
}
aside, nav { flex: 0 0 10em; }
nav { order: -1; }
display:flex;
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex;
display:flex
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex;
flex:1
-webkit-box-flex: 1;
-moz-box-flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
flex-wrap: wrap
-ms-flex-wrap: wrap;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
justify-content: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
flex-direction: column
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-moz-box-orient: vertical;
-moz-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
https://github.com/jwallin/flexbox-slides
http://www.w3.org/TR/css3-flexbox/