使用Flex布局添加列遇问题：第三列添加后元素堆叠

我正在学习Flex布局相关知识，希望在布局中添加更多列，但目前仅能实现两列布局。当尝试添加第三列时，div元素会出现堆叠现象。

相关CSS代码如下：

footer[is=footer] {
background: hsl(var(--tertiary));
display: grid;
gap: 3rem;
grid:
    "menu"
    "menu1"
    "menu2"
    "policies"
    "copyright";
padding: clamp(4rem,8vw,8rem) max((100% - 80rem) / 2,4vw);
}
footer[is=footer]>div>ul {
all: unset;
display: flex;
flex-flow: column wrap;
gap: 1rem;
}
footer[is=footer]>div:nth-of-type(1) {
display: flex;
flex-direction: column;
gap: 2rem 4rem;
grid-area: menu;
}
footer[is=footer]>div:nth-of-type(2) {
display: flex;
flex-direction: column;
gap: 2rem 4rem;
grid-area: menu1;
}
footer[is=footer]>div:nth-of-type(3) {
display: flex;
flex-direction: column;
gap: 2rem 4rem;
grid-area: menu2;
}
footer[is=footer]>div:nth-of-type(4) {
grid-area: policies;
}
footer[is=footer]>p {
all: unset;
color: hsl(var(--on-tertiary));
grid-area: copyright;
}

@media (min-width: 50em) {
footer[is=footer] {
grid: "menu menu1 menu2" "copyright policies" / -webkit-max-content 1fr;
grid:
    "menu menu1 menu2"
    "copyright policies" / max-content 1fr;
place-items: start;
}
footer[is=footer]>div:nth-of-type(4)>ul {
-moz-column-gap: clamp(1rem,4vw,2rem);
column-gap: clamp(1rem,4vw,2rem);
flex-direction: row;
}
}

问题分析 #

你当前的footer容器用的是Grid布局而非Flex，在桌面端媒体查询的grid定义中，列轨道只设置了两个（max-content 1fr），但网格模板区域里却声明了三个列（menu menu1 menu2），轨道数量与区域列数不匹配，导致第三列（menu2）没有对应的轨道空间，最终元素堆叠。

解决方案 #

方案1：修复Grid布局的轨道定义

调整媒体查询中的grid列轨道，增加第三个轨道，同时调整底部区域的网格分配：

@media (min-width: 50em) {
footer[is=footer] {
grid: 
    "menu menu1 menu2" 
    "copyright policies policies" / max-content max-content 1fr;
place-items: start;
}
/* 其余样式保持不变 */
}

这里将列轨道改为三个：max-content max-content 1fr，分别对应menu、menu1、menu2三个区域；同时让policies区域跨两列（copyright policies policies），保证底部布局对齐。

方案2：改用Flex实现多列菜单

如果确实想用Flex布局实现多列效果，可将footer容器在桌面端切换为Flex布局：

@media (min-width: 50em) {
footer[is=footer] {
display: flex;
flex-wrap: wrap;
gap: 3rem;
align-items: start;
}
footer[is=footer]>div:nth-of-type(1),
footer[is=footer]>div:nth-of-type(2),
footer[is=footer]>div:nth-of-type(3) {
flex: 1 1 200px; /* 自动分配空间，最小宽度200px避免过窄 */
}
footer[is=footer]>div:nth-of-type(4) {
margin-top: auto;
width: 100%;
}
footer[is=footer]>p {
width: 100%;
}
}

通过flex-wrap: wrap允许元素换行，flex: 1 1 200px让三个菜单列自动分配可用空间，空间不足时自动换行，避免堆叠。

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