vertically align and stretch sub child of flexbox element - HTML CSS CSS Layout

HTML CSS examples for CSS Layout:Flex Align

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

Description

vertically align and stretch sub child of flexbox element

Demo Code

ResultView the demo in separate window 

<html>
 <head> 
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
  <style id="compiled-css" type="text/css">

*{
   margin:0; padding:0;
}
ul, li {
   list-style:none;
}
html, body {
   height:100%;
}
nav {<!--  w  ww. ja  v a2 s.  c  om-->
   width:70%;height:100%;
}
.main-nav {
   display:flex;
   flex-direction:column;
   justify-content:space-between;
   height:100%;
}
.main-nav li {
   display:flex;
   flex-grow: 1;
   margin:.2em;
   background:rgb(225, 255, 255);
}
.main-nav li a {
   flex:1;
   display:flex;
   align-items: center;
   background:rgba(154,208,225,1);
}


      </style> 
 </head> 
 <body> 
  <nav> 
   <ul class="main-nav"> 
    <li> <a href="#">Cat 1</a> </li> 
    <li> <a href="#">Cat 2</a> </li> 
    <li> <a href="#">Cat 3</a> </li> 
    <li> <a href="#">Cat 4</a> </li> 
    <li> <a href="#">Cat 5</a> </li> 
   </ul> 
  </nav>  
 </body>
</html>

Related Tutorials