Vue路由卡片布局问题：单卡片自适应换行而非整组wrapper换行

问题说明 #

Vue项目中通过路由生成卡片式导航，标题、图标及路由跳转功能正常，逻辑与侧边栏一致。部分路由包含子项（如「agenda」「sessao」「packs e modulos」，其中「packs e modulos」包含「packs」和「modulos」两个子项），子项被包裹在menu-wrapper中且不显示父级元素。

当前布局缺陷：单卡片的menu-wrapper在空间不足时可正常换行，但多子卡片的menu-wrapper会整体切换到下一行。期望效果：空间不足时仅无法容纳的子卡片换行（例如Agenda、Sessao、Pack在一行显示，Modulo单独换行）。

当前代码 #

模板代码 #

<template>
  <div v-if="!item.hidden&&item.children" class="menu-wrapper">

    <template v-if="!item.hidden&&item.children && hasOneShowingChild(item.children,item) && (!onlyOneChild.children||onlyOneChild.noShowingChildren) && !item.alwaysShow">
      <app-link :to="resolvePath(onlyOneChild.path)">
        <!-- single -->
        <el-card :index="resolvePath(onlyOneChild.path)" :class="{'submenu-title-noDropdown':!isNest} ">
          <div class="contentCard">
            <div class="icon">
              <i :class="onlyOneChild.meta.icon" />
            </div>
            <span class="title">
              {{ generateTitle(onlyOneChild.meta.title) }}
            </span>
          </div>
        </el-card>
      </app-link>
    </template>
    <!-- group -->
    <template v-else class="childCard" v-for="child in visibleChildren" :index="resolvePath(item.path)">
      <app-link :to="resolvePath(child.path)">
        <el-card class="contentClass" :index="resolvePath(child.path)">
          <div class="contentCard">
            <div class="icon">
              <i :class="child.meta.icon" />
            </div>
            <span class="title">
              {{ generateTitle(child.meta.title) }}
            </span>
          </div>
        </el-card>
      </app-link>
    </template>
  </div>    
</template>

CSS样式 #

<style lang="css" scoped>
.el-menu--inline span{
  font-size: 0.9em;
}

.el-menu-item svg{
  margin-right: 11px;
}

.el-menu-item-group__title {
  display: none;
}

.is-active .menu-dot{
  background: #cca13c;
}

.menu-dot {
  width: 21px;
  background: #304156;
  height: 10px;
  border-radius: 20px;
  margin-right: 10px;
}

.contentClass{
  margin-right:20px;
}

.childCard{
  flex-grow:1;
}
.contentCard{
  display:grid;
}

.icon{
  text-align: center;
  font-size: 50px;
}

.title{
  text-align: center;
  font-size: 10px;
}

.el-card{
  margin-right: 20px;
  margin-top: 10px;
  min-height: 145px;
  min-width: 250px;
  flex-grow:1;
}

.menu-wrapper{
  flex-wrap: wrap;
  display: flex;
  min-height: fit-content;
}
</style>

修复方案 #

核心思路：让menu-wrapper不再作为独立的flex容器，而是让其子卡片直接参与全局的flex布局，避免分组容器导致整体换行。

步骤1：调整外层容器结构 #

给组件添加一个顶级flex容器，统一控制所有卡片的布局：

<template>
  <!-- 添加全局flex容器 -->
  <div class="card-nav-container">
    <div v-if="!item.hidden&&item.children" class="menu-wrapper">
      <!-- 原有模板内容不变 -->
    </div>
  </div>    
</template>

步骤2：修改CSS样式 #

<style lang="css" scoped>
/* 全局flex容器，控制所有卡片的换行逻辑 */
.card-nav-container {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 20px; /* 用gap替代margin，统一控制卡片间距 */
}

/* 让menu-wrapper不再作为布局容器，子元素直接参与外层flex */
.menu-wrapper {
  display: contents;
}

/* 移除卡片的margin，改用gap控制间距 */
.el-card{
  margin: 0;
  min-height: 145px;
  min-width: 250px;
  flex-grow:1;
}

/* 移除多余的margin设置 */
.contentClass{
  margin-right: 0;
}

/* 其他原有样式保留 */
.el-menu--inline span{
  font-size: 0.9em;
}

.el-menu-item svg{
  margin-right: 11px;
}

.el-menu-item-group__title {
  display: none;
}

.is-active .menu-dot{
  background: #cca13c;
}

.menu-dot {
  width: 21px;
  background: #304156;
  height: 10px;
  border-radius: 20px;
  margin-right: 10px;
}

.childCard{
  flex-grow:1;
}
.contentCard{
  display:grid;
}

.icon{
  text-align: center;
  font-size: 50px;
}

.title{
  text-align: center;
  font-size: 10px;
}
</style>

原理说明 #

• display: contents：让menu-wrapper不生成独立的布局盒，其所有子元素会直接成为外层card-nav-container的子项，打破分组容器的束缚。
• 全局card-nav-container作为唯一的flex容器，控制所有卡片的换行逻辑，空间不足时单个卡片自动换行。
• 用gap替代margin，避免卡片间距重复计算，布局更简洁可控。

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