nest content inside a flex box - HTML CSS CSS Layout

HTML CSS examples for CSS Layout:Flex Container

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

Description

nest content inside a flex box

Demo Code

ResultView the demo in separate window 

<html lang="en">
 <head> 
  <title>Holy Grail Layout</title> 
  <style>

.page {<!--   ww  w .j  ava  2  s .c  om-->
   display: flex;
   height: 100vh;
   flex-direction: column;
   margin: 0;
}
.content {
   display: flex;
   flex: 0 0 60vh;
}
.contentMain {
   flex: 1;
   background: lightblue;
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
}
.nav, .ads {
   flex: 0 0 12em;
}
.nav {
   order: -1;
   background: salmon;
}
.ads {
   background: green;
}
header, footer {
   flex: 0 0 20vh;
   background: #ccc;
}
.ucleft {
   flex: 1 0 33.33%;
   background-color: gray;
}
.uccenter {
   flex: 1 0 33.33%;
   background-color: red;
}
.ucright {
   flex: 1 0 33.33%;
   background-color: lightgray;
}
.middlecontent {
   flex: 0 0 100%;
   background-color: blue;
}
.lowercontent {
   flex: 0 0 100%;
   background-color: orange;
}


      </style> 
 </head> 
 <body translate="no" class="page"> 
  <header>
    Header 
  </header> 
  <div class="content"> 
   <main class="contentMain"> 
    <div class="ucleft">
      UC Left 
    </div> 
    <div class="uccenter">
      UC Center 
    </div> 
    <div class="ucright">
      UC Right 
    </div> 
    <div class="middlecontent">
      Middle Content 
    </div> 
    <div class="lowercontent">
      Lower Content 
    </div> 
   </main> 
   <nav class="nav">
     Nav 
   </nav> 
  </div> 
  <footer>
    Footer 
  </footer>  
 </body>
</html>

Related Tutorials