Responsible flex boxes with two div in the middle of page - HTML CSS CSS Layout

HTML CSS examples for CSS Layout:Flex Responsive

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

Description

Responsible flex boxes with two div in the middle of page

Demo Code

ResultView the demo in separate window 

<html lang="en">
 <head> 
  <title>Flexbox &amp; Mediaqueries</title> 
  <style>

body {<!--from   ww  w  .  jav  a2s.  co  m-->
   background-color: aquamarine;
}
#Wrapper, body, html, main, nav, header, div, class, footer{
   margin: 0;
   padding: 0;
}
header h1{
   position: relative;
   width: 50%;
   top: 8vh;
   left: 25%;
   text-align: center;
   margin: 0;
   padding: 0;
   color: deeppink;
}
.Container {
   position: absolute;
   top: 25%;
   left: 0;
   display: flex;
   height: 50%;
   width: 100%;
   flex-flow: row wrap;
   justify-content: center;
}
.item {
   width: 16em;
   background-color: lightslategrey;
   margin: 0 30px;
}
@media all and (max-width: 650px) {
   .item {
      width: 8em;
   }
}


      </style> 
 </head> 
 <body translate="no"> 
  <div id="Wrapper"> 
   <header> 
    <nav> 
    </nav> 
    <h1>This is a heading and it's extra long to test stuff.</h1> 
   </header> 
   <main> 
    <div class="Container"> 
     <div class="item"> 
     </div> 
     <div class="item"> 
     </div> 
    </div> 
   </main> 
  </div>  
 </body>
</html>

Related Tutorials