为什么<button>元素未在H1标签后换行及Flex布局相关问题

1. <button>没有在<h1>后自动换行的原因&实现button放在.col-1底部的方案 #

原因 #

你给.hero-header设置了display: flex，flex布局默认flex-direction: row（横向排列），容器内的直接子元素<h1>和<button>会默认排在同一行，所以不会自动换行。

之前尝试失效的原因 #

• 你设置flex-direction: column后元素挤到左侧：是因为flex纵向排列时，默认align-items: flex-start（水平方向左对齐），没有设置居中对齐所以元素靠左。
• align-self/align-items不生效：是因为父容器没有明确高度，flex布局的对齐属性需要在容器有可分配剩余空间的前提下才会生效。

修复后的CSS修改部分 #

/* 给.col-1添加flex纵向布局，让内部元素纵向排列 */
.col-1 {
  /* 原有属性保留，新增以下内容 */
  display: flex;
  flex-direction: column;
}

/* 修改hero-header的布局配置 */
.hero-header {
  display: flex;
  flex-direction: column;
  align-items: center; /* 水平居中，解决元素挤到左侧的问题 */
  flex: 1; /* 占满.col-1除了nav之外的所有剩余高度 */
  padding-top: 5em; /* 替代原来的margin-top，避免外边距塌陷 */
}

/* 给button添加margin-top: auto，自动顶到容器底部 */
button {
  /* 原有width:13%可以保留，也可以改成更适配的写法 */
  width: auto;
  padding: 10px 30px;
  margin-top: auto;
  margin-bottom: 2em; /* 距离底部留边，可选 */
}

2. 为什么flex加在非ul元素上时，ul的子元素不会横向排列 #

flex布局的生效范围仅限容器的直接子元素：
如果你把display: flex加在ul的父元素（比如nav）上，只会让nav的直接子元素<h2>和<ul>横向排列，不会影响ul内部的<li>元素。只有给<ul>本身设置display: flex，它的直接子元素<li>才会横向排列。

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