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 小时前
纯HTMLCSS静态网站——元神
css·html
格子惊蛰版3 小时前
🪲正在开发后台管理系统的同学 UnoCSS 一定要用起来
前端·css
我怎么能这么帅气3 小时前
拯救排版焦虑!CSS省略号的终极指南:单行、多行、生效与失效场景全解析
前端·css
前端大白话4 小时前
前端工程师必看!手把手教你用CSS实现超丝滑的自适应视频嵌入
前端·css·前端框架
一个天蝎座 白勺 程序猿5 小时前
Python爬虫(4)CSS核心机制:全面解析选择器分类、用法与实战应用
css·爬虫·python
sunbyte11 小时前
Tailwind CSS 初学者入门指南:项目集成,主要变更内容!
前端·css
鹿九巫16 小时前
【CSS】层叠,优先级与继承(四):层叠,优先级与继承的关系
前端·css
HuaHua的世界20 小时前
说说 Vue 中 CSS scoped 的原理?
css·vue.js
鹿九巫20 小时前
【CSS】层叠,优先级与继承(三):超详细继承知识点
前端·css
AXUI20 小时前
至美!看AXUI如何美化原始HTML标签(reset/normalize)
css·html