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>

效果:

相关推荐
sleeppingfrog18 分钟前
zebra打印机实现前端打印
前端
摇滚侠23 分钟前
前端判断不等于 undefined 不等于 null 的方法
前端
DFT计算杂谈38 分钟前
VASP+Wannier90 计算位移电流和二次谐波SHG
java·服务器·前端·python·算法
zhougl9961 小时前
Vue 中使用 WebSocket
前端·vue.js·websocket
无名的小白1 小时前
openclaw使用nginx反代部署过程 与disconnected (1008): pairing required解决
java·前端·nginx
2601_949857431 小时前
Flutter for OpenHarmony Web开发助手App实战:文本统计
前端·flutter
光影少年1 小时前
智能体UI ux pro max
前端·ui·ux
半梅芒果干1 小时前
vue3 实现无缝循环滚动
前端·javascript·vue.js
qq_419854051 小时前
锚点跳转及鼠标滚动与锚点高亮联动
前端
冰敷逆向1 小时前
京东h5st纯算分析
java·前端·javascript·爬虫·安全·web