弹性盒子Flex Box滚动条原理,避免被撑开,永不失效
在HTML中,要实现区域内容的滚动,只需要设定好元素的宽度和高度,然后设置CSS属性overflow 为auto或者scroll:
在Flex box布局中,有时我们内容的宽度和高度是可变的,无法确定下来,这时候设置滚动条,可能会失效。只要记住几个关键要素,就可以解决这个问题。
1、清楚的知道当前元素的flex flow
如果要设置水平滚动条,那么父元素的flex-flow要设置为row,如果要设置纵向滚动条,那么父元素的flex-flow要设置为column。
2、flex设置为1
3、滚动方向的大小(宽度或者高度)设置为0,非滚动方向大小设置为100%或者一个你喜欢的宽度
这样设置,基本就可以愉快的滚动了。
有时嵌套层数太多,可能也会失效,这时候记住另外一个关键点:
4、设置父元素的大小
如果父元素大小不清晰,也会出现滚动条失效的问题,所以需要把父元素的大小设置明白。如果父元素也是可变大小的,那么要保证嵌套的flex-flow全部一直,然后宽度或者高度设置为0,这样就可以正常滚动。像我的这个例子:
5、如何横向和纵向全都跟随flex滚动,这个比较麻烦,一个方向用上述方法,另外一个方向用calc函数来计算吧。
我的github上有个例子:https://github.com/vularsoft/studio-ui
里面的html-demo.html文件是一个完全由flex box实现的布局,感兴趣的可以参考。
弹性盒子Flex Box滚动条原理,避免被撑开,永不失效的更多相关文章
- CSS3 弹性盒子(Flex Box)
1 CSS3 弹性盒子(Flex Box) 1 http://caniuse.com/#search=flex%20box https://www.w3.org/TR/css-flexbox-1/ C ...
- CSS3 弹性盒子(Flex Box) 微信小程序图片通栏
{{define "chkUrl"}} <!DOCTYPE html><html lang="zh-cmn-Hans"><head ...
- CSS3总结五:弹性盒子(flex)、弹性盒子布局
弹性盒子容器的属性与应用 display:flex/inline-flex flex-direction flex-wrap justify-content align-items align-con ...
- 认识弹性盒子flex
认识弹性盒子flex 来源:https://blog.xybin.top/2022/flex 1.定义弹性布局(父级上定义)display:flex; 如果说内核为webkit 的必须前面加上 -we ...
- css3系列之弹性盒子 flex
弹性盒子(伸缩盒) 注意,本篇会很长,非常长, 因为弹性盒子的知识点比较多 搜索 弹性盒子的属性 ctrl + F 如果觉得图太小, ctrl + +键 设置弹性盒子的属性: display:f ...
- css3弹性盒子 flex布局
CSS3 弹性盒 1.display:flex 说明: 设置为弹性盒(父元素添加) 2.flex-direction(主轴排列方式) 说明: 顺序指定了弹性子元素在父容器中的位置 row 默认在一行内 ...
- CSS 弹性盒子 flex的三个属性:grow、shrink、basis
flex-grow 首先介绍flex-grow属性,flex-grow会在容器太大时(图片A.B的宽度和 < 父容器宽度)对元素作出调整. 如果图片A的flex-grow属性的值为 1,图片B的 ...
- css3之弹性盒模型(Flex Box)
CSS3 弹性盒子(Flex Box) 弹性盒子是 CSS3 的一种新的布局模式. CSS3 弹性盒( Flexible Box 或 flexbox),是一种当页面需要适应不同的屏幕大小以及设备类型时 ...
- css3弹性盒子
CSS3 弹性盒子(Flex Box) 弹性盒子是 CSS3 的一种新的布局模式. CSS3 弹性盒( Flexible Box 或 flexbox),是一种当页面需要适应不同的屏幕大小以及设备类型时 ...
随机推荐
- Opencv笔记(一):图像的基本操作
1.图像的读.显示和保存操作 import cv2 img = cv2.imread('filename',0); cv2.imshow('name',img); k=cv2.waitKey(0); ...
- 用命令修改Oracle数据库密码
1.改密码 (1).打开doc命令框键入:sqlplus /nolog (2).输入:connect / as sysdba (3).修改密码:alter user userNa ...
- 9.数据分组 group by
--数据分组 group by --作用:用于 对查询的数据进行分组,并处理 select deptno,job from emp group by deptno,job --1.分组之后,不能将除分 ...
- Linux基础篇三:文件系统
/bin 实际上是 /usr/bin /sbin 实际上是 /usr/sbin /usr/bin 里面的命令其实是依赖 /lib64 或者 /lib32 ldd /us ...
- 吴裕雄--天生自然python学习笔记:python安装配置tesseract-ocr-setup-3.05.00dev.exe
下载地址:https://digi.bib.uni-mannheim.de/tesseract/tesseract-ocr-setup-3.05.00dev.exe 点击安装,记得复制安装的路径,待会 ...
- openfire配置好文
http://www.th7.cn/db/mysql/201406/59838.shtml 下载地址:Openfire 3.8.2 Release
- Metric space,open set
目录 引入:绝对值 度量空间 Example: 开集,闭集 引入:绝对值 distance\(:|a-b|\) properties\(:(1)|x| \geq 0\),for all \(x \in ...
- tomcat端口占用异常
错误记录--更改tomcat端口号方法,Several ports (8005, 8080, 8009) 2011年01月18日 01:34:00 阅读数:202700 启动Tomcat服务器报错: ...
- 客户端和后台交互日期注意点 sqlite日期字段使用Date类型的情况下
不要直接传递时间类型 一般把时间格式化字符串后传递 不要传递Date().getTime() 毫秒数 非要使用的话需要在后台处理 传递的毫秒数 - TimeZone.getDefault().get ...
- linux下常用命令查看端口占用
在Linux使用过程中,需要了解当前系统开放了哪些端口,并且要查看开放这些端口的具体进程和用户,可以通过netstat命令进行简单查询netstat命令各个参数说明如下: -t : 指明显示TCP端口 ...