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>
相关推荐
ybb_ymm17 小时前
前端开发之ps基本使用
前端·css
软件技术NINI18 小时前
MATLAB疑难诊疗:从调试到优化的全攻略
javascript·css·python·html
~无忧花开~19 小时前
CSS学习笔记(五):CSS媒体查询入门指南
开发语言·前端·css·学习·媒体
嬉皮客21 小时前
TailwindCSS 初探
前端·css
小张成长计划..1 天前
前端6:CSS3 2D转换,CSS3动画,CSS3 3D转换
前端·3d·css3
昔人'1 天前
css使用 :where() 来简化大型 CSS 选择器列表
前端·css
昔人'1 天前
css `dorp-shadow`
前端·css
東風2 天前
色彩剧场:当CSS变量登上深色模式的舞台
css
昔人'2 天前
css`scrollbar-gutter`防止滚动条可见性变化时发生布局偏移
前端·css
在下Z.2 天前
前端基础--css(1)
前端·css