Viewed: 2049

Using flexbox for horizontal scrolling navigation

I’ve wrote previously on how to create a horizontal scrolling navigation using a combination of white-space: nowrap and display: inline-block. In this post, I want to cover how it can be achieved with flexbox and the potential benefits of this method.

This pattern, is one that is beginning to be used, much more, as time goes by. It’s great for touch devices, as horizontal scrolling is much more natural. It’s great on a Mac too, with a trackpad or Magic Mouse it’s just as easy as vertically scrolling. That’s a good chunk of your audience potentially you can improve the user experience for and utilise space better.


See the Pen Flexbox horizontal scrolling navigation by Steve (@stevemckinney) on CodePen.

The implementation

The implementation is flexible to work with your layout. Whether you have it positioned by your logo, or underneath it will be fine. Just apply the styles, to whichever element you prefer.

CSS: for the container

Aside from making the container display: flex, you need to make sure the items don’t wrap. This is achieved with the flex-wrap property and finally to allow the area to scroll we allow overflow. auto is the best choice in this case because it will scroll if any items overflow.

 .scroll {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  -ms-overflow-style: -ms-autohiding-scrollbar; }

It’s important to use the -webkit-overflow-scrolling property. On iOS devices, this makes scroll areas have momentum and ease of use. Android devices by default are easier to scroll, on the few I have tried this on. -ms-overflow-style: -ms-autohiding-scrollbar helps users on IE 10, 11 and Edge have a scrollbar to use on hover. You can hide it completely however from what I’m aware that stops scrolling. Not being visible immediately makes the appearance better for Windows users. Unfortunately, I haven’t been able to find a solution that works for Chrome and Firefox on Windows.

CSS: for the items

Each item needs a flex-grow and flex-shrink value of 0. The flex-basis property can be a percentage or pixel value if you desire, however, auto works best in this case.

.item {
  flex: 0 0 auto; }


<header class="scroll">
  <a href="">Logo</a>
    <a href="">Blog</a>
    <a href="">Portfolio</a>
    <a href="">Downloads</a>
    <a href="">About</a>
    <a href="">Contact</a>

Depending on which area you want to scroll, you can apply the styles to the header or navigation.

Benefits over using inline-block method

Admittedly the benefits aren’t too obvious when looking, the behaviour is the same. However the couple of things I mention below make it worthwhile.

No set widths required

In example two, we no longer need to set widths. Although, I have put one in the flex property of the logo, this is used throughout all examples.

This is useful if you want your logo to remain a specific size. Where if it was a percentage through the inline-block method it would resize. Which is fine, though it will take you so far before you need to adjust at another breakpoint. This avoids that.

The code is tidier

In the previous method I used font-size: 0, this isn’t great. If you use this on a larger scale, it’s possible it can trip you up in the future. Although it isn’t a bad method, it’s just not quite ideal.

Next to read

Get up to speed with CSS shapes