编程教育资源分享平台

网站首页 > 后端开发 正文

使用 Gap 属性给 CSS Flex 布局设置间距

luoriw 2024-02-01 14:29:11 后端开发 12 ℃ 0 评论

大家好,我是寻找安多芬。

众所周知,Flex 弹性盒子布局已经够流弊了,CSS Grid 网格布局比 Flex 弹性盒子布局还要强大,下面列举一些 Flex 不具备的优点:
1. 可以指定单元格在网格容器里的具体位置。
2. 可以使用
gap 属性设置单元格间指定的间距。Flex 以前是没有的
3. 可以跨行跨列设置单元格。
4. 可以互相重叠,通过设置 z-index 属性控制单元格层级。欲与绝对定位试比高
5. 可以随意摆放某一个单元格在容器中的位置,不按顺序来也行。

Grid 布局唯一缺点:就是生出来比较晚,比 Flex 兼容性差点,需要更高版本的浏览器支持。

详细教程我在这里就不赘述了,可以阅读CSS Grid 网格布局教程 - 阮一峰的网络日志里面有非常详细的指南和示例。

关于 CSS 排版布局,我有如下建议:

  1. 如果你还在使用传统布局(FloatPosition),建议你开始尝试 Flex 布局。
  2. 如果你已经用过 Flex 布局,建议你开始使用 Grid 布局。
  3. 还有一种叫做多列布局,也可以了解下,扩展下知识广度。
  4. 总之,推荐优先级:Grid > Flex > Float & Position

以前在 Flex 布局中是很难设置 item 间距的,只能够通过 justify-content 来设置,但是也只能模糊设置,并不能指定具体值,如果要指定具体值还是得用 margin

justify-content: space-around | space-between | space-evenly;

现在最新的 CSS 规范中,gap 属性也可以用在 Flex 布局里边了。但是对旧版浏览器兼容比 Grid 还不够友好。

兼容性

结语

上面是 gapFlexGrid 布局中的兼容性,大家可以根据自己的需求,自行确定要使用哪种布局方式,但我的建议是开始在项目中尝试新技术。

Tags:

本文暂时没有评论,来添加一个吧(●'◡'●)

欢迎 发表评论:

最近发表
标签列表
最新留言