SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    I solve practical problems. bronze trophy
    Michael Morris's Avatar
    Join Date
    Jan 2008
    Location
    Knoxville TN
    Posts
    2,023
    Mentioned
    63 Post(s)
    Tagged
    0 Thread(s)

    Wrap around in a flex layout.

    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.

    Code html:
    <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)

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,296
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi Michael,

    I haven't played around with flexbox much especially as it has been on a state of flux and only just finalised thus leaving all browsers with different versions at the moment. From my brief encounters with it I don't think that you can create boxes that wrap out of their grids but I would be interested if you have managed to find a way to do it. Remember to use the new syntax though.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •