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算法实现