[css] flex 间距 gap 折行滚动（九宫格 四宫格 横向滚动）
间距 gap
给 flex 布局设置一个 gap 属性，比如说 24 像素，那么 flex 布局下边的每个元素之间，就会有一个 24 像素的空隙
<main><div class="flex-container"><div class="flexbox">box1</div><div class="flexbox">box2</div><div class="flexbox">box3</div><div class="flexbox">box4</div><div class="flexbox">box5</div><div class="flexbox">box6</div></div>
</main>
.flex-container {gap: 24px;
}
.flex-container {display: flex;flex-wrap: wrap;gap: 24px;
}
参考：
felx gap
折行滚动（九宫格 四宫格 横向滚动）
实现两行多列布局，列的数目不定，左右可以滚动。
先固定父元素高度，然后用flex纵向排列（ flex-direction: column;）。然后子元素高度设置为父元素一半，这样一纵列只能放下两个元素，然后超出换行 （flex-wrap: wrap;），元素就自动向右排列了。
<ul><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li></ul>
*{padding: 0;margin: 0;}ul{height: 300px;list-style-type: none;width: 350px;// 横向滚动overflow-x: scroll;// 纵向不滚动overflow-y: hidden;display: flex;// 折行flex-wrap: wrap;// 想要横向滚动 一定要设这个flex-direction: column;align-content: space-between;// 间距gap:24px;}li{width: 100px;height: 120px;background: red;// margin: 10px;}
参考：
flex 实现两行滚动布局实现的思路
[css] flex 间距 gap 折行滚动（九宫格 四宫格 横向滚动）相关推荐
- 纯html+css固定表格一列或多列，其余进行横向滚动的方法-鹏仔先生
纯html+css固定表格一列或多列,其余进行横向滚动的方法 工作时候,遇到一个需求,表格的前两列固定不动,其他的跟随滚动条滚动,并没有在意,想起来很简单,刚开始想法是前两列absolute定位,后面 ...
- html表格的列并列,纯html+css固定表格一列或多列，其余进行横向滚动的方法-鹏仔先生...
纯html+css固定表格一列或多列,其余进行横向滚动的方法 工作时候,遇到一个需求,表格的前两列固定不动,其他的跟随滚动条滚动,并没有在意,想起来很简单,刚开始想法是前两列absolute定位,后面 ...
- css布局方式，实现四宫格，九宫格，16宫格等切换
1.借助absolute方位值,实现自适应的网格布局,用伪元素间隔 absolute+四个方位值撑开局面.float+宽度百分比实现横向排列.高度百分比实现自适应. 最外层的父元素使用absolute ...
- vue中构建相同的四宫格和九宫格
构建四宫格和九宫格,这个时候子组件时平均分配宽度的,于是在父视图中一定要设置的样式是 display: flex; flex-flow: row nowrap; 在子组件中一定要设置的样式是: dis ...
- 四宫格效果 css_【深度教研】智力游戏“九宫格” 集体教研活动纪实
[关键词]教研要建立过程模式,规范管理,分层推进,各负其责,及时反馈,展示总结.让教研的过程成为全体教师共同成长的过程. 游戏和材料不是一次性的制作和一次性的使用,其价值在于反复玩,玩中学 ...
- idle怎么运行空格行_我是怎么教小小朋友做数独的？解四宫格数独的几个方法...
既然要教小朋友们学会玩数独游戏,首先宝妈们得做好功课,了解一下数独的由来.规则是怎么样的.小熊妈咪在这里就不重复了,有兴趣的宝妈可以做个功课了解一下.在教小朋友们玩数独之前,首先小朋友得认识数字(不认 ...
- html横向滚动字幕代码,jQuery文字横向滚动效果的实现代码
很多网站都有公告,并且都喜欢用横向滚动的方式来展现.最近自己用jQuery也写了文字横向滚动,实现了自定义滚动速度,鼠标经过时暂停的功能. HTML代码如下: jQuery文字横向滚动jQuery制作 ...
- 建立简单的卷积神经网络训练分类器，识别九宫格、四宫格等图片
本文想实现一个分类器模型,该模型能够识别出九宫格图片并将图片进行切割,首先我要构造训练集,也就是自己生成一些九宫格图片. 其中r=3表示将其切割为3行,c=3表示将其切割为3列.你也可以生成4宫格图片 ...
- 用H5实现四宫格切换九宫格,再切换十六宫格
废话不多说,直接上代码 效果图如下 点击右上角按钮,即可切换4宫格,9宫格,16宫格 html部分 <!-- 切换按钮 --><div class="center" ...
最新文章
- 用Python如何查快递？
- [傅里叶变换及其应用学习笔记] 二十六. 高维傅里叶变换的推导
- python3 爬淘女郎
- GBRT(GBDT)(MART)(Tree Net)(Tree link)
- 互联网1分钟 |1113
- 17 种经典图表总结，轻松玩转数据可视化！
- cpp [Error] reference to ‘count‘ is ambiguous（全局变量的使用模糊不清）
- asp.net通过webservice调用java接口全过程_100-RPC、RMI、WebService、httpClient、跨域、集群部署...
- IOS AppUI规格指南
- 开课吧：C++基础之字符串匹配之BM算法（Boyer-Moore）
- AGM FPGA选型手册
- Alsa是Linux高级音频接口（百度文库无下载券抄来的）
- 爬虫：信息提取的一般方法
- html 图片摆动效果,CSS摆动/摇动效果
- 关于cox单因素与多因素分析
- 基于AD9850的多功能信号发生器
- 常见滤波汇总（KF、EKF、UKF和PF）
- 实际项目中的消息中心
- 计量经济学复习笔记（六）updated
- 项目十二做好计算机维护,电脑组装与维护教学课件 项目十二 电脑组装和维护进阶.ppt...