使用CSS Flexbox制作表格遇问题，新手求技术指导

嘿，我来帮你看看问题出在哪～你现在的代码主要有两个核心问题，导致表格布局没法规整显示：

错误点分析 #

• 未定义的CSS类：你在第二、第三行的Address列用了fieldgrow这个类，但你的CSS里完全没给这个类写样式！所以这个类相当于无效，没法让这一列按你预期的方式扩展宽度。
• 类名不一致：第一行的Address列用的是field类，下面两行却用了fieldgrow，这种类名不统一会导致对应列的宽度不匹配，没法形成整齐的表格列。

修正后的完整代码 #

CSS部分 #

/* 行容器：设置flex布局，垂直居中内容，加边框区分行 */
.row {
  display: flex;
  align-items: center;
  border-bottom: 1px solid #eeeeee;
  padding: 8px 0;
}

/* 基础列样式：均分空间，设置最小宽度防止挤压，加内边距优化排版 */
.field {
  flex-grow: 1;
  min-width: 120px;
  padding: 0 10px;
}

/* 扩展列样式：给需要容纳长文本的列更大的占比 */
.field--grow {
  flex-grow: 2;
  min-width: 200px;
}

HTML部分 #

<div class="row">
  <div class="field">Name</div>
  <div class="field">DOB</div>
  <div class="field field--grow">Address</div>
  <div class="field">Telephone Number</div>
  <div class="field">Sex</div>
</div>
<div class="row">
  <div class="field">Peter Parker</div>
  <div class="field">28/02/1991</div>
  <div class="field field--grow">Lorem ipsum, or lipsum as it is sometimes known, is a dummy text.</div>
  <div class="field">1233</div>
  <div class="field">M</div>
</div>
<div class="row">
  <div class="field">Peter Parker</div>
  <div class="field">28/02/1991</div>
  <div class="field field--grow">Lorem ipsum, or lipsum as it is sometimes known, is a dummy text.</div>
  <div class="field">1233</div>
  <div class="field">M</div>
</div>

修正说明 #

1. 统一列类名：所有行的对应列都用field基础类，需要扩展的Address列额外加field--grow类，保证列宽统一对齐。
2. 优化布局细节：给.row加了垂直居中、边框和内边距，让表格更美观；给.field设置最小宽度，避免内容被过度挤压变形。
3. 有效利用Flex属性：通过flex-grow控制列的宽度占比，让Address列能容纳更多长文本，同时保持整体布局规整。

作为HTML/CSS新手，记住一个小技巧：每次用自定义类名的时候，一定要检查CSS里有没有对应的样式定义，而且同一类元素（比如表格的同一列）尽量用统一的类名，这样布局才不会乱哦～

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