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>
相关推荐
光年像素2 小时前
前端开发的“三剑客”—— HTML、CSS、JavaScript
javascript·css·html5
前端与小赵2 小时前
渐变背景色和渐变字体颜色的实现方法
css·html·css3
Mo_jon3 小时前
CSS 瀑布流图片简易实现
前端·css·css3
@HNUSTer4 小时前
基于 HTML、CSS 和 JavaScript 的智能图像虚化系统
开发语言·前端·javascript·css·html
橙某人19 小时前
💫分享一个CSS技巧:用径向渐变实现弯曲框缺口效果
前端·css
前端fighter20 小时前
深入解析CSS定位:Sticky与Fixed的异同与实战应用
前端·css·面试
刺客-Andy1 天前
CSS中使用 HSL(Hue, Saturation, Lightness) 动态生成色值
前端·css·前端框架·vue
你的电影很有趣1 天前
lesson52:CSS进阶指南:雪碧图与边框技术的创新应用
前端·css
晓风残月淡1 天前
Mermaid流程图更改样式的方法
css·流程图·css3
芦苇Z1 天前
CSS :has() 父级选择器与关系查询
前端·css