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.

如果您创建网站，则可能会要求您创建一个水平滚动组件。 仅使用几行Flexbox即可轻松实现这一目标。 让我告诉你怎么做。

项目布局 (Project Layout)

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

我们需要创建一个容器，其中包含我们要滚动的所有图像。 这是代码：

造型项目 (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:

下一步是添加样式，以便容器水平滚动。 为此，我将容器显示为flexbox。 另外，我将overflow-x值设置为auto。 这是样式：

.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:

图像动人。 让我们在它们之间添加一些空格。 这是为此CSS：

.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 are in the center of the screen. By default, the hight 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:

我最后要做的更改是将滚动居中在屏幕中央。 默认情况下，html的高度是元素的高度。 我需要将高度设为视口的100％。 Flexbox提供了一种使用align-items设置将项目居中的方法。 要使用此功能，我将转换body以显示为flexbox。 这是我要为正文添加的代码：

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.

使用flexbox创建水平滚动区域非常容易。 谢谢阅读。

Here are some more articles you might like to read:

这里是您可能想阅读的更多文章：

翻译自:

flexbox算法实现