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>
相关推荐
银河系的一束光22 分钟前
旅游网站html、css、bootstrap
css·html·旅游
品克缤1 小时前
Vue3 + Router 页面切换时滚动条闪烁问题记录
前端·javascript·css·vue.js
北风toto13 小时前
前端CSS样式详细笔记
前端·css·笔记
菲利普马洛19 小时前
记一次主题闪烁问题
前端·css·react.js
逆光如雪20 小时前
移动端卡片边框怎么做高级?我用 CSS 实现了设计师的刁钻要求
前端·css·vue.js
走粥3 天前
clsx和twMerge解决CSS类名冲突问题
前端·css
吠品3 天前
CSS图片居中:Flexbox、Grid与Transform的完整指南
前端·css
天若有情6733 天前
Canvas生成艺术|意外诞生的混沌风暴(附完整源码+GitHub部署)
前端·css·html·github·canvas·网页
阿珊和她的猫3 天前
React 中 CSS 书写方式全解析
前端·css·react.js
打瞌睡的朱尤3 天前
CSS复习
前端·css