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="data:images/bhutan1.jpg" alt="Bhutan"> <img src="data:images/bhutan2.jpg" alt="Bhutan"> <img src="data:images/bhutan3.jpg" alt="Bhutan"> <img src="data:images/bhutan4.jpg" alt="Bhutan"> <img src="data:images/bhutan5.jpg" alt="Bhutan"> <img src="data:images/bhutan6.jpg" alt="Bhutan"> <img src="data: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算法实现
flexbox算法实现_如何使用Flexbox实现水平滚动相关推荐
- 由FlexBox算法强力驱动的Weex布局引擎
本文来自简书,原文地址:http://www.jianshu.com/p/d085032d4788 前言 在上篇文章里面谈了Weex在iOS客户端工作的基本流程.这篇文章将会详细的分析Weex是如何高 ...
- css flexbox模型_如何将Flexbox后备添加到CSS网格
css flexbox模型 I shared how to build a calendar with CSS Grid in the previous article. Today, I want ...
- 机器学习算法 拟合曲线_制定学习曲线以检测机器学习算法中的错误
机器学习算法 拟合曲线 机器学习 (Machine Learning) The learning curve is very useful to determine how to improve th ...
- 【大论文】可扩展机器学习的并行与分布式优化算法综述_亢良伊2017
一.基础知识: 1.目标函数 机器学习要优化的目标函数一般表现为一下形式: 函数J(θ)为目标函数,f为表示真实值与拟合值之差的损失函数,r(θ)为正则项(防止过拟合问题,主要分为L1正则项.L2正则 ...
- 算法实例_线性表 By:比方
算法实例_线性表 By:比方 什么是线性表? 从线性表的功能逻辑上来看,线性表就是由n(n>=0)个数据元素的排序组合,数据由x1,x2,x3,...,xn结构有序的顺序排列. 线性表的结构和特 ...
- matlab求心率变异性的程序,心率变异性及其相关算法实现_.ppt
心率变异性及其相关算法实现_ 附加功能参考文献 附加功能 该算法除了可以计算心率变异性之外,还有以下2种附加功能: 对心率的正常与否进行判断,输出有心率正常.心动过速.心动过缓3种情况: 对心脏的早搏 ...
- 现在实现flexbox 的策略和工具(flexbox兼容到IE8的跨浏览器解决方案)
原文:FLEXBOX IN THE REAL WORLD flexbox 相当好用,但是现在就可以用flexbox并且让它支持到IE8吗?如果你跟着下面的步骤,现在就可以开始用flexbox啦. 我介 ...
- 抢红包算法 c++_从0开始打造UI框架:动态化框架Scrollview物理学算法解析_搜狐汽车...
| 导语 动态化是APP未来的趋势,腾讯成立了动态化框架中台,打造腾讯自研的动态化框架解决方案.ScrollView是动态化框架UI组件的核心之一,而物理学算法可能是其中最重要的部分之一了,好的物理学 ...
- vux flexbox使用_指南针与Flexbox结合使用入门
vux flexbox使用 There is no doubt that flexbox is an effective solution for laying out web pages. Howe ...
最新文章
- 用requests获取网页源代码 python-手把手教你利用爬虫爬网页(Python代码)
- 做接口测试最重要的知识点
- linux排序语言,Linux sort 排序命令uniq去重复行
- 微服务如何解决分布式事务
- C++实现数组模拟链表(实现链表的增删功能)
- 前端学习(270):百度弹性导航
- 评价最高影片JAVAlibrary_视频 | 手游大神,动画导演,机圈新贵,极客怎么评价《愤怒的小鸟2》?...
- [.net 面向对象程序设计进阶] (9) 序列化(Serialization) (一) 二进制流序列化
- zookeeper学习之环境搭建
- 如何给Exadata数据库一体机打补丁patching图解
- smartq ten3 android4.2 v1.1,全线升级Android 4.2 智器平板新体验
- 在ubuntu20.04上安装最新版的qq
- python记录鼠标和键盘操作并重复_Python模拟鼠标和键盘操作实现重复性操作
- 如何退出企业微信?退出之后,企业微信的聊天记录还在吗?
- codelite编译器配置
- 1.初识elasticsearch
- 职场必备:Excel2016,官方推荐使用技巧
- 粒子群算法(PSO)的python实现
- Windows8下使用Oracle10G的忧伤
- 豆瓣首席架构师洪强宁谈Python语言