如何像表格一样完美对齐Div？Flex布局实现遇阻求助

一、Flex布局实现方案 #

Flex布局实现类表格对齐的核心是统一每列的宽度规则，同时避免padding/border撑开元素导致错位。以下是可直接复用的代码：

React组件代码 #

import React from 'react';
import './FlexTable.css';

const FlexTable = () => {
  const data = [
    { name: '张三', age: 25, job: '前端开发' },
    { name: '李四', age: 30, job: '后端开发' },
    { name: '王五', age: 28, job: 'UI设计' }
  ];

  return (
    <div className="flex-table">
      <div className="flex-table-row header">
        <div className="flex-table-col">姓名</div>
        <div className="flex-table-col">年龄</div>
        <div className="flex-table-col">职业</div>
      </div>
      {data.map((item, index) => (
        <div className="flex-table-row" key={index}>
          <div className="flex-table-col">{item.name}</div>
          <div className="flex-table-col">{item.age}</div>
          <div className="flex-table-col">{item.job}</div>
        </div>
      ))}
    </div>
  );
};

export default FlexTable;

对应CSS #

.flex-table {
  width: 100%;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  overflow: hidden;
}

.flex-table-row {
  display: flex;
  align-items: center; /* 垂直居中，需顶对齐可改为flex-start */
  border-bottom: 1px solid #e0e0e0;
}

.flex-table-row.header {
  background-color: #f5f5f5;
  font-weight: bold;
}

.flex-table-col {
  flex: 1; /* 均分宽度，也可设固定值如flex: 0 0 33.33% */
  padding: 12px 16px;
  box-sizing: border-box; /* 关键：避免padding撑开宽度 */
  text-align: left;
}

.flex-table-row:last-child {
  border-bottom: none;
}

二、Grid布局实现方案 #

Grid布局天生适合类表格结构，直接定义列规则即可确保对齐，代码更简洁：

React组件代码 #

import React from 'react';
import './GridTable.css';

const GridTable = () => {
  const data = [
    { name: '张三', age: 25, job: '前端开发' },
    { name: '李四', age: 30, job: '后端开发' },
    { name: '王五', age: 28, job: 'UI设计' }
  ];

  return (
    <div className="grid-table">
      <div className="grid-table-col header">姓名</div>
      <div className="grid-table-col header">年龄</div>
      <div className="grid-table-col header">职业</div>
      {data.map((item, index) => (
        <>
          <div className="grid-table-col" key={`name-${index}`}>{item.name}</div>
          <div className="grid-table-col" key={`age-${index}`}>{item.age}</div>
          <div className="grid-table-col" key={`job-${index}`}>{item.job}</div>
        </>
      ))}
    </div>
  );
};

export default GridTable;

对应CSS #

.grid-table {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3列均分，也可设固定宽度如150px 100px 200px */
  width: 100%;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  overflow: hidden;
}

.grid-table-col {
  padding: 12px 16px;
  box-sizing: border-box;
  border-bottom: 1px solid #e0e0e0;
  text-align: left;
}

.grid-table-col.header {
  background-color: #f5f5f5;
  font-weight: bold;
}

/* 移除最后一行的底部边框 */
.grid-table-col:last-child:nth-child(3n) {
  border-bottom: none;
}

三、常见错位问题排查 #

• 未设置box-sizing: border-box：padding或border会额外撑开元素宽度，导致列宽不一致，必须添加该属性。
• Flex布局align-items值错误：若设置为flex-start或center，当某行内容高度不同时会出现垂直错位，统一用stretch或center即可。
• Grid布局列模板不统一：不同行的列数或列宽规则不一致会导致错位，确保所有行遵循同一grid-template-columns配置。
• 内容溢出未处理：某列内容过长会撑开列宽，可添加overflow: hidden; text-overflow: ellipsis; white-space: nowrap;限制内容显示。

内容的提问来源于stack exchange，提问作者007 AZx