如何调整flex-direction为column的flex容器主轴上的子元素间距

可行解决方案 #

间距过大的核心原因是浏览器默认样式给<hr>和<h1>元素都设置了默认上下外边距，叠加后形成了多余间距，你可以通过以下方法调整：

1. 优先使用flex布局的gap属性控制间距
   直接给flex容器.header__title新增gap属性，直接指定两个flex子项的垂直间距，不会出现外边距折叠问题，数值可根据需求调整：

.header__title {
  position: absolute;
  top: 20%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  gap: 8px; /* 按需调整数值，即为两个子元素的垂直间距 */
}

2. 清除元素默认外边距
   覆盖浏览器默认的用户代理样式，清除<hr>和<h1>的默认边距，避免多余间距叠加：

/* 清除hr默认上下边距 */
hr {
  width: 27rem;
  display: inline-block;
  height: 0.3rem;
  background-color: white;
  margin: 0; /* 新增这行 */
}

/* 清除h1默认上下边距 */
.header__title-title h1 {
  margin: 0; /* 按需也可单独设置margin-top调整间距 */
}

3. 手动指定子项边距
   如果不需要统一控制间距，也可以单独给两个子项设置边距调整：

/* 给符号容器设置下外边距 */
.header__title-symbol {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-bottom: 6px; /* 按需调整数值 */
}

/* 或者给标题容器设置上外边距 */
.header__title-title {
  letter-spacing: 4px;
  color: white;
  font-size: 2.5rem;
  text-shadow: 0 4px 4px #d19224;
  animation-name: moveInLeft;
  animation-duration: 1s;
  font-family: "Zen Kaku Gothic Antique", sans-serif;
  margin-top: 6px; /* 按需调整数值 */
}

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