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>

效果:

相关推荐
晓1313几秒前
JavaScript基础篇——第五章 对象(最终篇)
开发语言·前端·javascript
倔强青铜三1 分钟前
苦练Python第1天:为何要在2025年学习Python
前端·后端·python
满分观察网友z10 分钟前
uniapp使用video实现沉浸式在线课程学习平台
前端
当牛作馬1 小时前
React——ant-design组件库使用问题记录
前端·react.js·前端框架
0wioiw01 小时前
Flutter基础(前端教程⑨-图片)
前端·flutter
一只一只妖1 小时前
uniapp小程序无感刷新token
前端·小程序·uni-app
绅士玖2 小时前
📝 深入浅出 JavaScript 拷贝:从浅拷贝到深拷贝 🚀
前端
中微子2 小时前
闭包面试宝典:高频考点与实战解析
前端·javascript
brzhang2 小时前
前端死在了 Python 朋友的嘴里?他用 Python 写了个交互式数据看板,着实秀了我一把,没碰一行 JavaScript
前端·后端·架构