技术栈

css的gap设置元素之间的间隔

前端小凯2023-10-09 15:54

在felx布局中可以使用gap来设置元素之间的间隔;

css 复制代码
.box{
     width: 800px;
     height: auto;
     border: 1px solid green;
     display: flex;
     flex-wrap: wrap;
     gap: 100px;
} 
       
.inner{
     width: 200px;
     height: 200px;
     background-color: skyblue;
}
html 复制代码
<div class="box">
    <div class="inner"></div>
    <div class="inner"></div>
    <div class="inner"></div>
    <div class="inner"></div>
    <div class="inner"></div>
    <div class="inner"></div>
    <div class="inner"></div>
    <div class="inner"></div>
</div>

效果:

上一篇:使用 Databend Kafka Connect 构建实时数据同步
下一篇:TCP原理特性详解
相关推荐
inksci
5 小时前
发布Ai生成的html markdown 推荐
前端·javascript·html
Lank_M
5 小时前
PDF签完名还能改什么?会签能过,压缩不行
前端
补码缩写
5 小时前
压缩前查PDF签名,字节搜索会漏掉对象流
前端
星光不问赶路人
5 小时前
Vue 项目类型检查:深入理解 vue-tsc --build
前端·vue.js
修炼的dance
5 小时前
压完的PDF验签不报错,是因为签名被删了
前端
ModStart
5 小时前
想玩 AI 翻唱?SeedVC 模型 + AIGCPanel 上手
前端
ModStart
5 小时前
ProcHub v0.7.0 命令行工具上线,进程、配置与 WSL 都能在终端管理
前端
那年那棵树
5 小时前
基于WebGis的人生如旅地图系统
前端·arcgis·vue·课程设计
ModStart
5 小时前
3 条命令,ProcHub 在终端管好后台进程
前端
热门推荐
01国内可直接用、免费额度/永久免费的大模型API清单(含 SiliconFlow、火山、阿里、智谱、百度、Kimi、DeepSeek、DMXAPI 等)02「全语录+省流版」邵艾伦 × 孙宇晨:聊风口、聊个人IP、聊年轻人如何抓住 AI 时代的机会03GitHub 镜像站点04如何新建文件夹? 电脑新建文件夹的4种方法05历年考研数学一、数学二、数学三真题试卷及答案PDF06几个好用的ip纯净度检测网站07蜘蛛磁力 搜索引擎大全,如何使用蜘蛛磁力查找磁力链接08Telegram APK 下载安装完整指南 — 2026年最新09苹果iPA游戏软件资源下载网站10Windows 10/11 如何退出微软账户并改用本地账户登录(含找不到选项的解决方法)