在 Flex 布局中使用 gap 属性

在 Flex 布局中使用 gap 属性

 
此文章更新于 1310 天前,其中的信息可能已经有所发展或是发生改变,请自行斟酌确认。

最近在更新博客的样式,突然想到现在的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;
}

gap in grid

#column-box {
  column-count: 3;
  gap: 20px;
}

gap in column

在 flex 中用法与 grid 中一样,并且同时可以使用 justify-content 和 align-content

#flex-box {
  display: flex;
  flex-wrap: wrap;
  gap: 20px 20px;
  justify-content: space-between;
}

gap in flex

✨ gap 可接收的值:

  1. normal:默认值,默认为0px,在 multi-column-layout 中为 1em;
  2. <length>: 精确值,例如:pxemremvwvmin 之类的精确值;
  3. <percentage>: 百分比值,表示相对栅格容器的百分比;
  4. calc(): 计算值,经过计算函数来指定间距大小;
  5. inherit: 继承自父级;
  6. initial: 初始(或默认)值;
  7. unset: 设为未设定。

🚫 兼容性

🎃 一些疑惑

  • 根据谁的大小来计算百分比?
    依据布局容器的 content-box 来确认百分比,与 padding/margin 的计算方式一致。

  • 为何有时会失效?
    需要容器有对应确定的宽高值,否则为 0

  • Safari 中已经支持了 gap 的 百分比值 和 calc()
    2021年6月3日测试

  •  

posted on   漫思  阅读(330)  评论(0编辑  收藏  举报

相关博文:
阅读排行:
· 微软正式发布.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滚动条回到顶部或指定位置

导航

< 2025年2月 >
26 27 28 29 30 31 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 1
2 3 4 5 6 7 8
点击右上角即可分享
微信分享提示