flexbox算法实现_如何使用Flexbox实现水平滚动

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:

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

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

下一步是添加样式，以便容器水平滚动。 为此，我将容器显示为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:

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

Here are 5 Layouts That You Can Make With FlexBoxThe CSS Flexible Box Layout — Flexbox — provides a simple solution to the design and layout problems designers and…hackernoon.comThink outside the box with CSS shape-outsideCSS is based off a box model. If you have an image that is a circle that you want to wrap text around, it will wrap…hackernoon.comLearn the CSS border-radius property by building a calculatorHave you ever seen a button on a web page that has rounded edges? Have you ever seen an image that fits within a…medium.freecodecamp.org

这里有5个版面，你可以与Flexbox的 CSS的灵活盒布局- Flexbox的-提供了一个简单的解决方案的设计和布局问题，设计师和... hackernoon.com 觉得跟CSS形状外箱外 CSS是基于掀起了盒子模型。 如果您有一个要环绕文本的圆的图像，它将环绕... hackernoon.com 通过构建计算器来学习CSS border-radius属性 您是否见过网页上具有圆角的按钮？ 您是否曾经看过适合... media.freecodecamp.org 的图像？

翻译自: https://www.freecodecamp.org/news/horizontal-scrolling-using-flexbox-f9d16817f742/

flexbox算法实现