flex实现间距相等的table布局

 

<!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>

相关推荐

  1. flex布局flex:1相关知识

    2024-01-07 17:56:01       38 阅读
  2. flex布局学习笔记

    2024-01-07 17:56:01       14 阅读

最近更新

  1. TCP协议是安全的吗?

    2024-01-07 17:56:01       16 阅读
  2. 阿里云服务器执行yum,一直下载docker-ce-stable失败

    2024-01-07 17:56:01       16 阅读
  3. 【Python教程】压缩PDF文件大小

    2024-01-07 17:56:01       15 阅读
  4. 通过文章id递归查询所有评论(xml)

    2024-01-07 17:56:01       18 阅读

热门阅读

  1. 【MySQL】关于日期转换的方法

    2024-01-07 17:56:01       41 阅读
  2. Github Copilot 快速入门

    2024-01-07 17:56:01       38 阅读
  3. Vue中的组件通信方式及应用场景

    2024-01-07 17:56:01       42 阅读
  4. Linux iptables地址转换

    2024-01-07 17:56:01       30 阅读
  5. 代码随想录算法训练营

    2024-01-07 17:56:01       37 阅读
  6. leetcode08-棒球比赛

    2024-01-07 17:56:01       40 阅读
  7. 深入理解 Vue.js 中的 `h` 函数:虚拟 DOM 创建指南

    2024-01-07 17:56:01       113 阅读
  8. 计算机网络在中国的发展

    2024-01-07 17:56:01       41 阅读
  9. Linux中的强大的行处理器工具!awk!

    2024-01-07 17:56:01       33 阅读