Distribute elements evenly using CSS

Question

A method to distribute elements evenly in a container using CSS appeared on Smashing Magazine today.

I recently had to use Javascript to achieve the same effect for

Answer 1

Thanks to the CSS3 Flexbox module, this is possible with two lines of CSS.

Check the Browser compatibility table for Flexbox

HTML

  

    
Home
    
    
News
    
    
Theme
    
    
Activities
    
    
Contact
    
  

CSS

ul {
  display: flex;
}
li {
  flex: 1; /* Short hand for flex-grow: 1 and flex-shrink: 1 */
}

Output:

ul, li {
  margin: 0;
  padding: 0;
}
ul {
  display: flex;
  list-style: none;
}
li {
  flex: 1;
  text-align: center;
}

  

    
Home
    
    
News
    
    
Theme
    
    
Activities
    
    
Contact