CSS flex布局div行列 表头与内容列垂直不对齐求解

使用div元素搭建flex行列布局时，表头标题与后续行对应内容无法沿垂直方向对齐，效果如下：

• 列数不统一：表头行.header-row共7个.col列，但分组标题行、内容行的.order-row错误设置了8个.col列，多余空列挤占其他列的宽度空间
• 宽度分配逻辑混乱：行元素设置了justify-content: space-evenly，会在列之间自动添加均匀间距，破坏列宽度的一致性；所有列统一设置flex: 1均分宽度，但标注了.wide的长文本列未定义对应宽度规则
• 样式缺失：代码中使用了.col.center居中类但未编写对应样式，部分列的对齐方式和表头不匹配

• 统一所有行的列数量，删除所有.order-row中多余的第8个空列，保证表头、分组标题、内容行均为7列，和表头字段一一对应
• 移除行元素上的justify-content: space-evenly属性，统一所有行的flex布局规则，通过flex属性固定每列的宽度占比，保证同位置列在所有行宽度完全一致
• 补全.col.center居中类样式，添加box-sizing: border-box避免padding撑破列宽，添加align-items: center实现列内文本垂直居中
• 给.wide类设置更大的flex占比，适配日期、手机号、描述这类长文本列的展示需求

CSS部分 #

.orders {
  display: flex;
  flex-flow: column nowrap;
  overflow: hidden;
  overflow-y: auto;
  margin-left: 0px;
}

/* 统一所有行的flex布局规则 */
.header-row, .order-row {
  display: flex;
  flex-flow: row nowrap;
  width: 100%;
}

.header-row {
  background: #868686;
  color: white;
}

.header {
  background: black;
  color: white;
  font-weight: bolder;
}

.pointer {
  cursor: pointer;
}

/* 统一列基础样式 */
.orders .col {
  display: flex;
  flex: 1;
  padding: 10px;
  align-items: center;
  box-sizing: border-box;
}

/* 对齐类样式 */
.orders .col.start {
  justify-content: flex-start;
}
.orders .col.center {
  justify-content: center;
}

/* 长文本列宽度占比 */
.orders .col.wide {
  flex: 2;
}

.header-text .header-status:before {
    content: '- Collapse';
    display: inline;
}

.header-text.active .header-status:before {
    content: '+ Expand';
}

HTML部分 #

<div class="orders">
  <div class="header-row">
    <div class="col start">Name</div>
    <div class="col center">Date/Time</div>
    <div class="col center">Phone</div>
    <div class="col center">PAX</div>
    <div class="col center">Description</div>
    <div class="col center">Table</div>
    <div class="col start"></div>
  </div>
  <div class="pointer">
    <div class="header">
      <div class="order-row">
        <div class="col start"><span class="header-text">New <span class="header-status"></span></span></div>
        <div class="col start"></div>
        <div class="col start"></div>
        <div class="col start"></div>
        <div class="col start"></div>
        <div class="col start"></div>
        <div class="col start"></div>
      </div>
    </div>
    <div class="content">
      <div class="order-row">
        <div class="col start">Mitchell Admin</div>
        <div class="col start wide">2022-05-30 10:00:00</div>
        <div class="col start wide">+1 555-555-5555</div>
        <div class="col center">1</div>
        <div class="col start wide"><span style="margin-left: 9px;">description</span></div>
        <div class="col start"></div>
        <div class="col start"></div>
      </div>
    </div>
  </div>

  <div class="pointer">
    <div class="header">
      <div class="order-row">
        <div class="col start"><span class="header-text">Confirm <span class="header-status"></span></span></div>
        <div class="col start"></div>
        <div class="col start"></div>
        <div class="col start"></div>
        <div class="col start"></div>
        <div class="col start"></div>
        <div class="col start"></div>
      </div>
    </div>
    <div class="content">
      <div class="order-row">
        <div class="col start">Mitchell Admin</div>
        <div class="col start wide">2022-06-17 12:00:00</div>
        <div class="col start wide">+1 555-555-5555</div>
        <div class="col center">1</div>
        <div class="col start wide">test<span style="margin-left: 9px;"></span></div>
        <div class="col start"></div>
        <div class="col start"></div>
      </div>
      <div class="order-row">
        <div class="col start">Mitchell Admin</div>
        <div class="col start wide">2022-05-30 10:00:00</div>
        <div class="col start wide">+1 555-555-5555</div>
        <div class="col center">1</div>
        <div class="col start wide"><span style="margin-left: 9px;">test</span></div>
        <div class="col start"></div>
        <div class="col start"></div>
      </div>
    </div>
  </div>
</div>

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