Flexbox responsive layout with multiple sidebars - HTML CSS CSS Layout

HTML CSS examples for CSS Layout:Responsive Layout

  1. HOME
  2. HTML CSS
  3. CSS Layout
  4. Responsive Layout

Description

Flexbox responsive layout with multiple sidebars

Demo Code

ResultView the demo in separate window 

<html lang="en">
 <head> 
  <title>Flexbox responsive layout with multiple sidebars</title> 
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> 
  <style>
* {<!--  w w w  . ja  v  a 2 s . c o  m-->
   box-sizing:border-box;
}

.wrapper {
   display:flex;
   flex-flow:row wrap;
}

.item {
   text-align:center;
   font-size:2.4em;
   padding:.4em;
}

.group, .item {
   flex:2 100%;
}

.container-1 {
   background-color:Chartreuse;
}

.container-2 {
   background-color:yellow;
}

.container-3 {
   background-color:blue;
}

.container-4 {
   background-color:pink;
}

.sidebar {
   background-color:WhiteSmoke;
}

@media (min-width: 768px)  {
   .item {
      flex:0 76%;
   }
   
   .container-1 {
      order:-3;
      flex:2 auto;
   }
   
   .sidebar {
      order:-2;
      flex:0 26%;
   }

}

@media (min-width: 992px)  {
   .item {
      flex:2 51%;
   }
   
   .container-1 {
      order:-4;
      flex:2 auto;
   }
   
   .container-4 {
      order:-3;
      flex:0 26%;
   }
   
   .sidebar {
      order:-2;
      flex:0 26%;
   }
   
   .group {
      flex:0 51%;
   }

}
</style> 
 </head> 
 <body translate="no"> 
  <div class="wrapper"> 
   <div class="item container-1">
     Container 1 
   </div> 
   <div class="wrapper group"> 
    <div class="item container-2">
      Container 2 
    </div> 
    <div class="item container-3">
      Container 3 
    </div> 
   </div> 
   <aside class="item sidebar">
     Sidebar 
   </aside> 
   <div class="item container-4">
     Container 4 
   </div> 
  </div>  
 </body>
</html>

Related Tutorials