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>
相关推荐
Lee川1 小时前
CSS盒模型实战:用代码透视 `border-box`与 `content-box`的天壤之别
css
哈里谢顿6 小时前
CSS 入门完全指南:从零构建你的第一个样式表
css
. . . . .7 小时前
CSS 编写与管理范式 - Tailwind和CSS-in-JS
css
人良爱编程18 小时前
Hugo的Stack主题配置记录03-背景虚化-导航栏-Apache ECharts创建地图
前端·javascript·apache·echarts·css3·html5
RFCEO1 天前
前端编程 课程十六、:CSS 盒子模型
css·前端基础课程·css盒子模型·css盒子模型的组成·精准控制元素的大小和位置·css布局的基石·内边距(padding)
夏幻灵1 天前
CSS三大特性:层叠、继承与优先级解析
前端·css
会编程的土豆2 天前
新手前端小细节
前端·css·html·项目
珹洺2 天前
Bootstrap-HTML(二)深入探索容器,网格系统和排版
前端·css·bootstrap·html·dubbo
BillKu2 天前
VS Code HTML CSS Support 插件详解
前端·css·html
咔咔一顿操作2 天前
轻量无依赖!autoviwe 页面自适应组件实战:从安装到源码深度解析
javascript·arcgis·npm·css3·html5