Flexbox嵌套布局：实现父级纵向排列、子级Item横向换行展示

布局失效由两处核心CSS配置错误导致：

• .Products作为横向Flex容器，默认flex-wrap属性值为nowrap，不会自动换行，所有子元素会被强制压缩在同一行展示
• .Products写死了固定高度100px，即使开启换行，第二行及以后的Item会溢出容器边界，覆盖到下方按钮区域，出现按钮混入Item列表的问题

不需要调整HTML结构，直接替换原有CSS即可：

.Home {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: stretch;
  align-content: stretch;
}

.Products {
  display: flex;
  flex-direction: row;
  /* 核心修复：开启横向容器自动换行 */
  flex-wrap: wrap;
  width: 100%;
  /* 移除原固定高度100px，让容器高度随Item内容自适应，避免溢出覆盖下方按钮 */
  color: white;
  /* 可选：添加上下行间距，避免上下行Item贴边 */
  row-gap: 10px;
}

.Item {
  margin-right: 3%;
  /* 可选：固定Item宽度实现每行4个，不需要可删除该行 */
  width: 22%;
  min-height: 75px;
  border: 2px dashed red;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: gray;
}

• 外层.Home纵向Flex布局生效，Products模块、按钮块严格按从上到下顺序排列，不会出现穿插
• 内层.Products自动换行生效，Item横向排列，超出容器宽度后自动折到下一行
• 容器高度自适应后，按钮会始终固定在所有Item列表的下方，不会出现错位混入

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