css: gap解决flex-wrap换行,两行之间无间隙

CSS gap 属性是用来设置网格行与列之间的间隙(gutters),该属性是 row-gapcolumn-gap 的简写形式。 developer.mozilla.org/zh-CN/docs/...

html 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            background: red;
            display: flex;
            flex-wrap: wrap;
            padding: 10px;
            row-gap: 10px;
        }
        .inner-box {
            background: green;
            width: 100px;
            height: 100px;
            border: 1px solid yellow;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="inner-box"></div>
        <div class="inner-box"></div>
        <div class="inner-box"></div>
        <div class="inner-box"></div>
        <div class="inner-box"></div>
        <div class="inner-box"></div>
        <div class="inner-box"></div>
        <div class="inner-box"></div>
        <div class="inner-box"></div>
        <div class="inner-box"></div>
        <div class="inner-box"></div>
        <div class="inner-box"></div>
    </div>
</body>
</html>

row-gap

css 复制代码
.box {
            background: red;
            display: flex;
            flex-wrap: wrap;
            padding: 10px;
            row-gap: 10px;
        }

column-gap

css 复制代码
        .box {
            background: red;
            display: flex;
            flex-wrap: wrap;
            padding: 10px;
            row-gap: 10px;
            column-gap: 10px;
        }
相关推荐
青皮桔3 小时前
CSS实现百分比水柱图
前端·css
失落的多巴胺3 小时前
使用deepseek制作“喝什么奶茶”随机抽签小网页
javascript·css·css3·html5
牧杉-惊蛰5 小时前
uniapp微信小程序css中background-image失效问题
css·微信小程序·uni-app
哎呦你好7 小时前
【CSS】Grid 布局基础知识及实例展示
开发语言·前端·css·css3
islandzzzz8 小时前
(第二篇)HMTL+CSS+JS-新手小白循序渐进案例入门
前端·javascript·css·html
晴殇i10 小时前
CSS 迎来重大升级:Chrome 137 支持 if () 条件函数,样式逻辑从此更灵活
前端·css·面试
Hilaku10 小时前
2025年,每个前端都应该了解的CSS选择器:`:has()`, `:is()`, `:where()`
前端·css
sunbyte10 小时前
50天50个小项目 (Vue3 + Tailwindcss V4) ✨ | DragNDrop(拖拽占用组件)
前端·javascript·css·vue.js·vue
旷世奇才李先生11 小时前
CSS 安装使用教程
前端·css
遗憾随她而去.11 小时前
深入理解CSS中的BFC 与IFC , 布局的两大基础概念
前端·css