Expand flex row - HTML CSS CSS Layout

HTML CSS examples for CSS Layout:Flex

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

Description

Expand flex row

Demo Code

ResultView the demo in separate window 

<html lang="en">
 <head> 
  <style>
ul {<!--   ww  w. j  a  va  2 s .  c om-->
   display:flex;
   flex-direction:row;
   float:left;
}

li {
   list-style:none;
   padding-left:6px;
   font-size:11em;
}

.content {
   display:flex;
   flex-direction:column;
}
</style> 
 </head> 
 <body translate="no"> 
  <div class="content"> 
   <div class="subcontent"> 
    <ul> 
     <li>One</li> 
     <li>Two</li> 
     <li>Three</li> 
     <li>Four</li> 
     <li>Five</li> 
     <li>Six</li> 
    </ul> 
    <div> 
     <div class="subcontent"> 
      <ul> 
       <li>One</li> 
       <li>Two</li> 
       <li>Three</li> 
       <li>Four</li> 
       <li>Five</li> 
       <li>Six</li> 
      </ul> 
      <div> 
      </div> 
     </div> 
    </div> 
   </div> 
  </div>  
 </body>
</html>

Related Tutorials