DEV Community

Cover image for How to implement horizontal scrolling using Flexbox
Jennifer Bland
Jennifer Bland

Posted on • Updated on • Originally published at

How to implement horizontal scrolling using Flexbox

If you create websites, chances are you have been asked to create a horizontal scrolling component. It is extremely easy to implement this using just a few lines of Flexbox. Let me show you how.

Project Layout

We need to create a container that will contain all the images that we want to scroll. Here is the code:

<div class="container"><img src="images/bhutan1.jpg" alt="Bhutan" />
<img src="images/bhutan2.jpg" alt="Bhutan" />
<img src="images/bhutan3.jpg" alt="Bhutan" />
<img src="images/bhutan4.jpg" alt="Bhutan" />
<img src="images/bhutan5.jpg" alt="Bhutan" />
<img src="images/bhutan6.jpg" alt="Bhutan" />
<img src="images/bhutan7.jpg" alt="Bhutan" /></div>

Styling the Project

Next step is to add styling so that the container scrolls horizontally. To do this I make the container display as flexbox. In addition, I am setting the overflow-x value to auto. Here is the style:

 .container {
    display: flex;
    overflow-x: auto;

This is what the horizontal scroll looks like:

That does provide our requirement of a horizontal scroll area. I am not satisfied with how it looks. There are three things I want to change:

  • Add white space between the images
  • Get rid of the horizontal scrollbar
  • Place the scroller in the middle of the screen

The images are touching. Let’s add some white space between them. Here is the CSS for this:

.container img {
    margin-right: 15px;

Next, I want to get rid of the horizontal scrollbar which I can do with this code:

.container::-webkit-scrollbar {
    display: none;

The last change that I want to do is to center the scrolling area in the center of the screen. By default, the height of the html is the height of the elements. I need to make the height to be 100% of the viewport. Flexbox provides a way to center items with the align-items setting. To use this functionality, I am going to convert the body to display as flexbox. Here is the code that I am going to add for the body:

body {
    display: flex;
    align-items: center;
    height: 100vh;

With these changes, here is what our final horizontal scroll area looks like.


It is very easy to create a horizontal scroll area using flexbox. Thanks for reading.

Training Courses

I create training courses on my website CodePrep. I have training courses on Vue, Webpack, Flexbox, functional programming and more. Check it out here.

Top comments (6)

liana profile image
Liana Felt (she/her)

Really clear explanation!

ratracegrad profile image
Jennifer Bland


Thanks for the feedback. Glad you enjoyed the article.

francois_geyser profile image
Francois Geyser

Clean and simple. Thanks for sharing

ratracegrad profile image
Jennifer Bland


Thanks. Glad you enjoyed the article.

schillingjerrid profile image
Jerrid "Dutch" Schilling

This looks really nice. Thanks for sharing!

ratracegrad profile image
Jennifer Bland


You are welcome!