如何让Flex实现的日历项在全屏幕尺寸下均匀分布对齐？

AI 小北

2026-10-3

问题原因

错位的核心是flex子元素的伸缩规则不统一：

仅设置了flex-grow:1，但未设置统一的flex-shrink和flex-basis，小屏收缩时不同行的元素宽度计算不一致
未统一盒模型，按钮的内置padding、边框会额外占用宽度，加剧宽度计算偏差
子元素的margin边距计算受flex布局影响，不同行的边距分配不统一

修复方案

仅调整CSS部分即可，HTML无需改动：

/* 统一日历内所有元素的盒模型，避免padding/border撑大元素 */
.callendar * {
  box-sizing: border-box;
}

.btn-etable {
  color: #fff;
  background-color: #d92b3a;
  border-color: #d92b3a;
}

.btn-etable:hover,
.btn-etable.selected {
  color: #d92b3a;
  background-color: #fff;
  border-color: #d92b3a;
}

/* 去掉按钮默认margin，用父容器gap统一控制间距 */
.btn-ppl {
  height: 48px;
  margin: 0;
}

.callendar {
  display: flex;
  flex-direction: column;
  width: 100%;
  /* 控制行与行之间的间距 */
  gap: 2px;
}

.week,
.callendar_header {
  display: flex;
  width: 100%;
  /* 控制同一行内元素的间距 */
  gap: 2px;
}

.callendar_header {
  order: -1;
}

/* 头部、日历项、空白项统一flex规则，保证宽度分配完全一致 */
.callendar_header span,
.callendar-item,
.blank {
  /* 1:1等比例伸缩，基础宽度为0，完全按比例分配宽度 */
  flex: 1 1 0;
  min-width: 0;
  height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  margin: 0;
}