April 29, 2016 in CSS

Evenly spaced multi-line navigation using Flexbox module (CSS3)

Recently, in one of my project, the client asked me to create a multi-line navigation, which should be evenly spaced according to link text. One major consideration was that navigation should be dynamic and the number of links can be changed in future if needed.

Following is the screenshot for desired navigation:

Initially, I tried to create this navigation using display properties (inline-block) and floats, but i found that it’s not possible to make both rows equally spaced (justified), unless I add different padding for each individual link. But in that case it will not remain dynamically editable as required by client.

I realised that this issue can be solved with help of flexbox module, so I decide to use flexbox for this navigation. This article explains the code I have created.

Following is the html code of navigation.

<nav class="primary_nav">
     <ul>
          <li><a href="#">paradisematic</a></li>
          <li><a href="#">Bookmarksgrove</a></li>
          <li><a href="#">coast of the Semantics</a></li>
          <li><a href="#">Alphabet Village</a></li>
          <li><a href="#">World of Grammar</a></li>
          <li><a href="#">necessary Mountains</a></li>
     </ul>
</nav>

HTML code is a simple list, nothing special here. All the magic is happening with help if CSS only.

First, let’s go through the CSS code for UL tag:

.primary_nav ul {
      display: -webkit-box;
      display: -moz-box;
      display: -ms-flexbox;
      display: -moz-flex;
      display: -webkit-flex;
      display: flex;
 
      -webkit-flex-direction: row;
      flex-direction: row;
 
      flex-wrap: wrap;
 
     -webkit-justify-content: space-around;
     justify-content: space-around;
 
      -webkit-align-content: space-around;
      align-content: space-around;
}

In the code above, i have used display: flex property, to tell the browser that this UL should be displayed with flexbox module.

The flex-direction property tells the flex container what should be the direction of its content, here i have used flex-direction: row to ensure that list will be displayed as a row (horizontally).

The flex-wrap:wrap property is used to wrap the content into multiple lines.

Next two properties are used to justify the list items within available space. The justify-content: space-between property adds equal space between the adjacent flex items. The align-content: space-around property evenly distribute the empty space between the first and the last rows.

Code for LI tag:

.primary_nav li {
      flex-grow: 1;
      flex-shrink: 1;
      flex-basis: auto; 
}

I want LI’s to adjust it’s width automatically depending on the width of text. The flex-grow and flex-shrink properties specifies flexbox items to grow or shrink to cover additional space, as necessary. Since we want the columns to behave the same while growing and shrinking, set value of both these properties to 1.

The flex-basis property specifies how much space each column starts with. Then, the remaining space is distributed using the flex-grow and flex-shrink properties.

See the Pen Evenly spaced multi-line navigation using Flexbox by Jaspreet (@jasjain) on CodePen.