如何将.rij_lessenrooster放在.rij_weekdagen下方并实现每日内容居中对齐

问题根因 #

你当前布局错位的核心原因是上下行结构不匹配、列宽分配规则不一致：

1. 顶部星期行.rij_weekdagen只有5个星期标题子元素，没有给左侧时间列预留位置，而下方所有课程行.rij_lessenrooster都多了一个.uur_container时间列，上下行列数完全不匹配，自然无法对齐
2. 两个flex容器的对齐规则不统一，且子元素没有固定宽度占比，flex会根据内容自动调整列宽，进一步放大了错位问题

修复方案 #

第一步：调整HTML结构 #

给.rij_weekdagen最开头添加一个空占位元素，占住时间列的宽度，保证上下行的列结构完全一致（同时修正原代码里星期二的拼写错误Disndag为Dinsdag）：

<div class="rij_weekdagen">
  <!-- 新增占位元素，占住左侧时间列宽度 -->
  <div class="weekdag_tijd_placeholder"></div>
  <div class="weekdag">Maandag</div>
  <div class="weekdag">Dinsdag</div>
  <div class="weekdag">Woensdag</div>
  <div class="weekdag">Donderdag</div>
  <div class="weekdag">Vrijdag</div>
</div>

第二步：替换原CSS代码 #

用以下代码替换原CSS，统一所有行的布局规则：

/* 通用行样式，统一所有行的布局规则 */
.rij_weekdagen, .rij_lessenrooster, .middagpauze {
  display: flex;
  width: 100%;
  box-sizing: border-box;
}
/* 时间列和对应占位列统一固定宽度，可按需调整数值 */
.uur_container, .weekdag_tijd_placeholder {
  flex: 0 0 80px;
}
/* 所有星期标题、课程列统一等分剩余宽度 */
.weekdag, .vak {
  flex: 1 1 0;
  padding: 4px 8px;
  box-sizing: border-box;
  text-align: center;
}
/* 原有样式调整 */
.rij_weekdagen {
  border-bottom: 1px solid #000;
  margin-bottom: 12px;
}
.klasnaam {
  text-align: center;
  font-weight: bold;
  margin: 12px 0;
}
.rij_lessenrooster {
  align-items: stretch;
  margin-bottom: 12px;
}
.boven {
  display: flex;
  flex-direction: column;
  margin-bottom: 60px;
}

效果说明 #

调整后所有列的宽度占比完全统一，星期标题会自动和下方对应列的课程内容居中对齐，不会再出现偏移问题。如果觉得时间列宽度不合适，直接修改.uur_container的flex:0 0 80px里的80px数值即可。

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