Make Flexible box layout model to create horizontal UL - HTML CSS CSS Layout

HTML CSS examples for CSS Layout:Flex

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

Description

Make Flexible box layout model to create horizontal UL

Demo Code

ResultView the demo in separate window 

<html lang="en">
 <head> 
  <title>Flexbox demo using margin: auto</title> 
  <style>
ul {<!--  w w  w .j  a  v  a2  s.c  o  m-->
   display:-webkit-flex;
   display:flex;
   height:6em;
   background:yellow;
}

li {
   margin:auto;
   border:2px solid;
}

ul.column {
   -webkit-flex-direction:column;
   flex-direction:column;
}
</style> 
 </head> 
 <body translate="no"> 
  <ul class="row"> 
   <li>a</li> 
   <li>b</li> 
   <li>c</li> 
  </ul> 
  <ul class="column"> 
   <li>a</li> 
   <li>b</li> 
   <li>c</li> 
  </ul>  
 </body>
</html>

Related Tutorials