Nested Flexbox - HTML CSS CSS Layout

HTML CSS examples for CSS Layout:Flex Container

  1. HOME
  2. HTML CSS
  3. CSS Layout
  4. Flex Container

Description

Nested Flexbox

Demo Code

ResultView the demo in separate window 

<html lang="en">
 <head> 
  <style>

.workspace {<!--from  w  w w.  j  av  a  2s  .  co m-->
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
}
.vertical {
   flex: 1;
   display: flex;
   flex-direction: row;
   background: grey;
   width: 100%;
   height: 100%;
}
.vertical > .item {
   flex: 1;
   display: flex;
   flex-direction: row;
   width: 100%;
   border-left: 1px solid #181a1f;
   border-bottom: 1px solid #181a1f;
   flex-grow: 1;
}
.horizontal {
   flex: 1;
   display: flex;
   flex-direction: column;
   background: grey;
   width: 100%;
}
.horizontal > .item {
   flex: 1;
   display: flex;
   flex-direction: column;
   width: 100%;
   border-left: 1px solid #181a1f;
   border-bottom: 1px solid #181a1f;
   flex-grow: 1;
}


      </style> 
 </head> 
 <body translate="no"> 
  <div class="workspace"> 
   <div class="vertical"> 
    <div class="item"> 
     <div class="horizontal"> 
      <div class="item" style="background:pink;"> 
       <a>Up</a> 
      </div> 
      <div class="item"> 
       <div class="vertical"> 
        <div class="item" style="background:red;"> 
         <a>Left</a> 
        </div> 
        <div class="item" style="background:orange;"> 
         <a>Strange</a> 
        </div> 
       </div> 
      </div> 
      <div class="item" style="background:blue;"> 
       <a>Another</a> 
      </div> 
     </div> 
    </div> 
    <div class="item"> 
     <a>Right</a> 
    </div> 
    <div class="item" style="background:green;"> 
     <a>Dang</a> 
    </div> 
   </div> 
  </div>  
 </body>
</html>

Related Tutorials