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>
相关推荐
下北沢美食家7 小时前
css面试题
前端·css
m0_502724957 小时前
CSS position 属性的所有取值(2024最新)
前端·css
Amumu121387 小时前
CSS3: 3D转换、浏览器私有前缀
css·3d·css3
@大迁世界7 小时前
32.CSS魔术师 (CSS Houdini)
前端·css·人工智能·tensorflow·houdini
用户31532477954513 小时前
Tailwind CSS 学习手册
前端·css
拜无忧18 小时前
css卡片,重叠div,顶部错开,底部对齐
css
纯情小萝卜18 小时前
2026前端CSS黑科技技巧
css
bluceli3 天前
CSS容器查询:响应式设计的新范式
前端·css
Bigger3 天前
CSS 这些年都经历了什么?一次看懂 CSS 的演化史
前端·css·前端工程化
大漠_w3cpluscom4 天前
使用 clip-path: shape() 创建 Squircle 形状
前端·css·weui