Aligning columns with flexbox - HTML CSS CSS Layout

HTML CSS examples for CSS Layout:Flex

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

Description

Aligning columns with flexbox

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <style type="text/css">
ul {<!--from ww w.  j av  a2  s.  c om-->
   display: inline-flex;
   flex-direction: column;
   flex-wrap: wrap;
   align-content: space-around;
   height: 150px;
   width: 100%;
   list-style: none;
   margin: 0;
   padding: 0;
}
ul li {
   border: 1px solid blue;
   padding: 8px;
   text-align: center;
}

      </style> 
   </head> 
   <body> 
      <ul> 
         <li>Link One</li> 
         <li>Link Two</li> 
         <li>Link Three</li> 
         <li>Link Four</li> 
         <li>Link One</li> 
         <li>Link Two</li> 
         <li>Link Three</li> 
         <li>Link Four</li> 
         <li>Link Five</li> 
         <li>Link Six</li> 
         <li>Link Seven</li> 
         <li>Link Eight</li> 
         <li>Link Nine</li> 
         <li>Link Ten</li> 
         <li>Link Eleven</li> 
         <li>Link Tweleve</li> 
      </ul>  
   </body>
</html>

Related Tutorials