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>
相关推荐
Fan_web5 小时前
jQuery——事件委托
开发语言·前端·javascript·css·jquery
安冬的码畜日常5 小时前
【CSS in Depth 2 精译_044】第七章 响应式设计概述
前端·css·css3·html5·响应式设计·响应式
赛男丨木子丿小喵5 小时前
visual studio2022添加新项中没有html和css
css·html·visual studio
太阳花ˉ8 小时前
html+css+js实现step进度条效果
javascript·css·html
懒羊羊大王呀10 小时前
CSS——属性值计算
前端·css
看到请催我学习11 小时前
如何实现两个标签页之间的通信
javascript·css·typescript·node.js·html5
昨天;明天。今天。13 小时前
案例-任务清单
前端·javascript·css
惜.己15 小时前
javaScript基础(8个案例+代码+效果图)
开发语言·前端·javascript·vscode·css3·html5
秋殇与星河16 小时前
CSS总结
前端·css
神之王楠16 小时前
如何通过js加载css和html
javascript·css·html