Control height of Flex Box to create tile layout - HTML CSS CSS Layout

HTML CSS examples for CSS Layout:Flex Height

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

Description

Control height of Flex Box to create tile layout

Demo Code

ResultView the demo in separate window 

<html lang="en">
 <head> 
  <title>Welcome to my site</title> 
  <meta charset="utf-8"> 
  <style type="text/css">
#mommy {<!--from  w  w  w .  ja  v a2 s  . c  om-->
   display:-webkit-box;
   display:-ms-flexbox;
   display:-webkit-flex;
   display:flex;
   border:3px solid Chartreuse;
   width:701px;
   height:301px;
}

#mommy div {
   -webkit-box-flex:2;
   width:21%;
   -ms-flex:2;
   -webkit-flex:2;
   flex:2;
   padding:21px;
   margin:11px;
   border-radius:21px;
   height:100px;
}

#kid1 {
   border:3px solid yellow;
   background:green;
}

#kid2 {
   border:3px solid blue;
   background:yellow;
}

#kid3 {
   border:3px solid pink;
   background:red;
}

#kid4 {
   border:3px solid WhiteSmoke;
   background:orange;
}
</style> 
 </head> 
 <body> 
  <section id="mommy"> 
   <div id="kid1">
     Child 1 
   </div> 
   <div id="kid2">
     Child 2 
   </div> 
   <div id="kid3">
     Child 3 
   </div> 
   <div id="kid4">
     Child 4 
   </div> 
  </section>  
 </body>
</html>

Related Tutorials