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

在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>

效果:

相关推荐
我是真菜1 小时前
彻底理解js中的深浅拷贝
前端·javascript
江畔柳前堤1 小时前
github实战指南07-CLI 与高级技巧
前端·人工智能·chrome·深度学习·github·caffe·issue
kisdiem2 小时前
ReAct:让大模型一边推理,一边行动
前端·react.js·前端框架
西部荒野子2 小时前
JS 如何跑进两个原生世界
前端
RANxy2 小时前
AntV 入门系列第一篇:从零开始的数据可视化之旅
前端
小小小小宇2 小时前
前端 WebRTC 全解析与应用
前端
华玥2 小时前
优化滚动列表,使用虚拟滚动
前端
小小小小宇2 小时前
前端 WebAssembly 全解析与应用
前端
huangdong_2 小时前
京东商品图片视频批量下载与m3u8视频合并技术完整实现方案
大数据·前端·数据库
尽兴-3 小时前
4.1 智能体核心:Agent、Sub-Agent、ReAct、规划执行
前端·javascript·react.js·agent·react·subagent