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>
相关推荐
晴殇i10 小时前
CSS Grid 与 Flexbox:现代前端布局的双子星
前端·css
曹卫平dudu10 小时前
一起学习TailWind Css
前端·css
加油乐14 小时前
css及js实现正反面翻转
前端·javascript·css
西洼工作室15 小时前
移动开发常见问题
前端·css3·web移动开发
踢球的打工仔16 小时前
前端css(2)
前端·css
韩曙亮17 小时前
【Web APIs】元素偏移量 offset 系列属性 ④ ( offset 属性案例 - 放大镜效果 )
前端·javascript·css·html·offset·dom·web apis
相逢一笑与君行18 小时前
css使用grid布局实现网格(表格),动态调整行高,列宽,整体缩放,插入行,列,删除行,列
前端·css·react
韩曙亮18 小时前
【Web APIs】元素可视区 client 系列属性 ( client 属性简介 | 常用的 client 属性 | 使用场景 | 代码示例 )
前端·javascript·css·css3·bom·client·web apis
冰暮流星2 天前
css3网格布局2
前端·css·css3
沐风。562 天前
css函数
前端·css·css3