Flexbox子项因文本长度差异对齐异常的解决求助

问题说明 #

我有一个设置了flex-direction: column的flex容器，希望每个子项（.forecast-item）内的元素能上下对齐整齐，但由于.day标签的文本长度不同，使用justify-content: space-between后，温度区域（.high-low）的布局出现错乱，无法和其他行的温度区域对齐。

解决方案 #

方法一：给日期标签设置固定宽度 #

通过给.day设置固定宽度，确保每个日期区域占用的空间一致，后续的温度和图标就能自然对齐。

修改后的CSS：

.next-week {
  color: #f1e3d5;
  margin-top: 4rem;
  display: flex;
  flex-direction: column;
  gap: 4rem;
}

.forecast-item {
  display: flex;
  justify-content: space-between;
}

/* 添加固定宽度，可根据实际需求调整 */
.day {
  width: 100px;
}

.forecast-item h4 {
  font-size: 1.6rem;
  color: #f1e3d5;
  margin-bottom: 0.4rem;
}

.forecast-item i {
  font-size: 2rem;
}

.high-low {
  display: flex;
  gap: 1rem;
}

方法二：改用Grid布局实现精准对齐 #

Grid布局天生适配多列对齐场景，将.forecast-item改为grid布局，指定三列的分配规则，让每一列自动对齐，不受文本长度影响。

修改后的CSS：

.next-week {
  color: #f1e3d5;
  margin-top: 4rem;
  display: flex;
  flex-direction: column;
  gap: 4rem;
}

/* 替换为grid布局 */
.forecast-item {
  display: grid;
  grid-template-columns: auto auto auto;
  justify-content: space-between;
  align-items: center; /* 垂直居中对齐元素 */
}

.forecast-item h4 {
  font-size: 1.6rem;
  color: #f1e3d5;
  margin-bottom: 0.4rem;
}

.forecast-item i {
  font-size: 2rem;
}

.high-low {
  display: flex;
  gap: 1rem;
}

如果需要温度区域始终居中，可调整grid-template-columns为：

grid-template-columns: 1fr auto 1fr;
justify-items: center;

布局异常效果展示 #

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