flex实现间距相等的table布局

html 复制代码
<!DOCTYPE html>
<html>
<head>
  <style>
    .container {
      width: 800px;
      display: flex;
      flex-wrap: wrap;
      gap: 20px;
      border: 1px solid #ddd;
      margin: 20px;
    }
    
    .cell {
      width: calc(50% - 10px); /* 每列占据一半宽度,减去间隙的宽度 */
      background-color: #f1f1f1;
      padding: 10px;
      box-sizing: border-box;
    }

    body, html {
      height: 100%;
      margin: 0;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="cell">单元格1</div>
    <div class="cell">单元格2</div>
    <div class="cell">单元格3</div>
    <div class="cell">单元格4</div>
    <div class="cell">单元格5</div>
    <div class="cell">单元格6</div>
  </div>
</body>
</html>
相关推荐
winfredzhang17 分钟前
从零构建:基于 Node.js 的全栈视频资料管理系统开发实录
css·node.js·html·音视频·js·收藏,搜索,缩略图
加个鸡腿儿18 小时前
经验分享2:SSR 项目中响应式组件的闪动陷阱与修复实践
前端·css·架构
华仔啊19 小时前
写 CSS 用 px?这 3 个单位能让页面自动适配屏幕
前端·css
菩提小狗20 小时前
Sqli-Labs Less-3 靶场完整解题流程解析-豆包生成
前端·css·less
Pilot-HJQ1 天前
固定 Element UI 表格表头的方法(超简单)
vue.js·学习·css3·html5
web小白成长日记1 天前
CSS 作用域隔离实战:React、Vue 与 Styled Components 的三种范式
前端·css·vue.js·react.js
@@小旭2 天前
实现头部Sticky 粘性布局,并且点击菜单滑动到相应位置
前端·javascript·css
Irene19912 天前
CSS 定位属性(relative、absolute、fixed、sticky)与实用技巧总结
css
我的写法有点潮2 天前
推荐几个国外比较流行的UI库(上)
前端·javascript·css
m0_502724952 天前
vue动态设置背景图片后显示异常
前端·css