在 Flex 布局中使用 gap 属性
在 Flex 布局中使用 gap 属性
最近在更新博客的样式,突然想到现在的flex布局已经可以定义间距了,所以大概整理了一下关于gap这个新属性资料。
gap
属性是用来设置网格行与列之间的间隙(gutters),该属性是row-gap
与column-gap
的简写形式。
起初是在 Grid 布局中用 grid-gap
来设置行间距和列间距的,后来意识到 Multi-column 布局中有一个 column-gap
属性,同时存在 grid-column-gap
和 column-gap
对于开发者来说是一个很疑惑的问题。并且在大范围应用的 Flex 布局中,并没有一个很好的方法来设置行间距和列间距。
于是CSS齐属属性规范开始调整,gap
代替了grid-gap
属性,并且规范对间隙属性进行了大统一,三种布局只需要使用 gap
属性就可以设置间距样式了。
我一直觉得 Grid 布局的属性太多,而且早期的兼容性很差,相对于 Flex 布局 我觉得最好用的属性就是 grid-gap
,因为 flex
只有 5 种对齐属性,如果需要做间距的话就很麻烦,只能使用 margin
。
今年年初的时候一大波的公众号在推送 flex
已经可以使用 gap
属性了,正好趁着这段时间博客主题改版,正好有用上。
🔨 使用方式
在 grid
与 multi-column
种使用、表现形式是和原先是一样的
#grid-box {
display: grid;
height: 200px;
grid-template: repeat(3, 1fr) / repeat(3, 1fr);
gap: 15px 20px;
}
#column-box {
column-count: 3;
gap: 20px;
}
在 flex
中用法与 grid
中一样,并且同时可以使用 justify-content
和 align-content
#flex-box {
display: flex;
flex-wrap: wrap;
gap: 20px 20px;
justify-content: space-between;
}
✨ gap
可接收的值:
normal
:默认值,默认为0px,在multi-column-layout
中为1em
;<length>
: 精确值,例如:px
,em
,rem
,vw
,vmin
之类的精确值;<percentage>
: 百分比值,表示相对栅格容器的百分比;calc()
: 计算值,经过计算函数来指定间距大小;inherit
: 继承自父级;initial
: 初始(或默认)值;unset
: 设为未设定。
🚫 兼容性
-
Grid布局 还是支持
grid-gap
属性,但这是为了兼容那些不支持gap
属性的浏览器,处于类似于私有前缀的状态了,MDN上是建议使用gap
属性。 -
Flex布局 对于
gap
属性的支持,还处于草案阶段 [2021/6/3] ,如果需要在生产环境使用,可能需要进行考量,虽说主流浏览器全部都已经支持了。 -
Multi-column布局 已经支持了
gap
属性,但是只有列间距,没有行间距的概念,所以设置row-gap
是没有效果的。
🎃 一些疑惑
-
根据谁的大小来计算百分比?
依据布局容器的content-box
来确认百分比,与padding/margin
的计算方式一致。 -
为何有时会失效?
需要容器有对应确定的宽高值,否则为0
。 -
Safari 中已经支持了
gap
的 百分比值 和calc()
值
2021年6月3日测试 -
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· C# 集成 DeepSeek 模型实现 AI 私有化(本地部署与 API 调用教程)
· DeepSeek R1 简明指南:架构、训练、本地部署及硬件要求
· 没有源码,如何修改代码逻辑?
· NetPad:一个.NET开源、跨平台的C#编辑器
2020-12-29 js将手机号中间四位变成*号
2020-12-29 取出字符串中的所有数字
2020-12-29 js中字节B转化成KB,MB,GB
2020-12-29 数组去重的几种方法
2020-12-29 最全的常用正则表达式大全——包括校验数字、字符、一些特殊的需求等等
2020-12-29 jQuery滚动条回到顶部或指定位置