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>
相关推荐
谙忆10241 天前
图片裁剪总是跑偏?用 object-fit、object-position 和真实像素把坐标对齐
javascript·css·图像识别
01_ice1 天前
前端学习css
前端·css·学习
zh_xuan1 天前
个人主页左侧菜单支持分组,以及菜单显示和隐藏
前端·javascript·css
Ming_studying1 天前
HTML + CSS + JavaScript实现可视化JSON工具:格式化、折叠、搜索与错误定位
javascript·css·html·json·数据可视化·web工具
To_OC2 天前
面试被问了三回三栏布局,这次我终于把 BFC 那层窗户纸捅破了
前端·css·面试
CarIise2 天前
CSS选择器与样式关联
前端·css·tensorflow
里欧跑得慢2 天前
CSS 模块化架构的演进:BEM、CSS Modules 到 CSS-in-JS 的反思
前端·css·flutter·web·css-in-js
人间凡尔赛2 天前
2026 前端必修:4 个让 CSS 脱胎换骨的现代新特性(附实战代码)
前端·css
Asize3 天前
2 道大厂面试题:TS 工具类型我懂了,CSS 3 列布局把我问住了
前端·css·typescript
এ慕ོ冬℘゜3 天前
前端实战:使用 jQuery 与 CSS3 打造动态数据表格与滑块交互
前端·css3·jquery