DEV Community

loading...
Cover image for How to implement horizontal scrolling using Flexbox

How to implement horizontal scrolling using Flexbox

ratracegrad profile image Jennifer Bland Originally published at jenniferbland.com ・Updated on ・2 min read

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.

Conclusion

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.

Discussion (6)

pic
Editor guide
Collapse
liana profile image
Liana Felt (she/her)

Really clear explanation!

Collapse
ratracegrad profile image
Jennifer Bland Author

Liana,

Thanks for the feedback. Glad you enjoyed the article.

Collapse
francois_geyser profile image
Francois Geyser

Clean and simple. Thanks for sharing

Collapse
ratracegrad profile image
Jennifer Bland Author

Francois,

Thanks. Glad you enjoyed the article.

Collapse
schillingjerrid profile image
Jerrid "Dutch" Schilling

This looks really nice. Thanks for sharing!

Collapse
ratracegrad profile image
Jennifer Bland Author

Dutch,

You are welcome!