Html css中flexbox的对齐问题

我想将左侧的菜单与右侧有多个仪表板/卡的页面内容对齐。问题是仪表板/卡是动态的，有时卡的数量可能是1，有时超过1。我希望右侧的所有仪表板都居中对齐

我尝试了以下代码，但没有按预期工作：

main{
显示器：flex；
柔性包装：包装；
}
旁白{
宽度：200px；
高度：200px；
边框：2倍纯红；
}
.弹性项目{
显示器：flex；
证明内容：中心；
柔性包装：包装；
}
.弹性项目{
左边距：50像素；
边框：2倍纯红；
弹性：1；
宽度：250px；
高度：100px；
}

菜单
项目1
项目2
项目3

我删除了

flex:1.flex item

的code>属性，因为看起来您希望它们具有特定的大小<代码>宽度和

flex

作为

flex:1一起使用没有意义

启用

flex grow

，并告知div使用所有可用空间。
然后我添加了

flex-grow:1

到

.flex items

，因此它使用了所有可用的空间（在它达到所需的宽度之前），因此

justify content:center

可以完成它的工作

main{
显示器：flex；
} 
旁白{
宽度：200px；
高度：200px；
边框：2倍纯红；
}
.弹性项目{
显示器：flex；
证明内容：中心；
柔性包装：包装；
柔性生长：1；
}
.弹性项目{
左边距：10px；
边框：2倍纯红；
宽度：80px；
高度：100px；
}

菜单
项目1
项目2
项目3

将

flex:1

从

.flex-item

移动到

.flex-items

。是否将项目按列或按行对齐？重新居中，垂直居中还是水平居中？@VadimOvchinnikov我希望右侧的项目水平居中。即使右侧有一个项目，它也必须水平居中。@user1188867项目应该在行或列中对齐吗？