I’m trying to make use of flex box layouts to nice up a page. Let’s start with a model of the markup, cause the actual page is - quite large.
<DOCTYPE !html>
<html>
<head>
<title>CSS 3 Flexbox</title>
<style type="text/css">
.flex {
width: 100%;
background: blue;
}
.flex >div {
display: inline-block;
min-height: 100px;
min-width: 24%;
margin: 0 auto;
}
.nav {
display: block;
width: 25%;
float: left;
background: green;
}
.search {
width: 75%;
background: purple;
}
.pagination {
width: 75%;
background: orange;
}
.product {
background: red;
}
</style>
</head>
<body>
<div class="flex">
<div class="nav">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus et risus et est rhoncus facilisis. Suspendisse rhoncus eleifend nisl, et pretium tellus scelerisque nec. Pellentesque convallis libero a neque molestie vehicula. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vivamus posuere sem ac enim gravida pretium congue justo gravida. Cras mauris odio, iaculis sit amet tincidunt quis, sollicitudin quis dolor. Etiam enim dui, laoreet at viverra auctor, vehicula non neque. Etiam dui velit, ullamcorper vitae dictum quis, molestie ac mi. Aenean accumsan justo vel velit ultricies at cursus ipsum tempor. Sed augue dui, iaculis commodo sagittis nec, tristique sit amet leo. Morbi odio purus, euismod ac venenatis id, feugiat sed erat. Proin gravida arcu et tortor interdum iaculis. Mauris suscipit sagittis nisi blandit tristique. Aliquam convallis sapien nec sapien feugiat gravida laoreet felis pharetra. Cras eu lacinia velit. Cras ut nisi quis sem bibendum tincidunt vitae non metus.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus et risus et est rhoncus facilisis. Suspendisse rhoncus eleifend nisl, et pretium tellus scelerisque nec. Pellentesque convallis libero a neque molestie vehicula. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vivamus posuere sem ac enim gravida pretium congue justo gravida. Cras mauris odio, iaculis sit amet tincidunt quis, sollicitudin quis dolor. Etiam enim dui, laoreet at viverra auctor, vehicula non neque. Etiam dui velit, ullamcorper vitae dictum quis, molestie ac mi. Aenean accumsan justo vel velit ultricies at cursus ipsum tempor. Sed augue dui, iaculis commodo sagittis nec, tristique sit amet leo. Morbi odio purus, euismod ac venenatis id, feugiat sed erat. Proin gravida arcu et tortor interdum iaculis. Mauris suscipit sagittis nisi blandit tristique. Aliquam convallis sapien nec sapien feugiat gravida laoreet felis pharetra. Cras eu lacinia velit. Cras ut nisi quis sem bibendum tincidunt vitae non metus.</p>
</div>
<div class="search"></div>
<div class="pagination"></div>
<div class="product"></div>
<div class="product"></div>
<div class="product"></div>
<div class="product"></div>
<div class="product"></div>
<div class="product"></div>
<div class="product"></div>
<div class="product"></div>
<div class="product"></div>
<div class="product"></div>
<div class="product"></div>
<div class="product"></div>
<div class="product"></div>
<div class="product"></div>
<div class="product"></div>
<div class="product"></div>
<div class="product"></div>
<div class="product"></div>
<div class="pagination"></div>
</div>
</body>
</html>
The green box is my nav, the purple a search bar, orange are the pagination areas. Note how the red products wrap around the nav area – is this possible with flex layout? I’ve been playing with this for nearly a day and can’t figure it out. If I get a solution before anyone posts one I’ll put it here.
(Note that flexboxing this is a nice to do. I still have to get the inline box model to work for IE 8+ and Firefox which don’t support flex. There’s a lot of margin calculation logic in the code that isn’t here in the model to make the whole thing look nicer than the model does)