Css 沿共享基线垂直对齐相同高度块的文本（支持混合字体大小）

我有一个单行/行导航/菜单，其中一些项目的字体较大，但我希望所有项目的文本都与基线上的和谐一致

我还需要的项目作出反应，以悬停在整个高度的菜单，所以用户不必瞄准较小的文本（这是子菜单，但不是这个问题的一部分）

我尝试使用Flexbox，但无法混合使用

对齐项目：拉伸（全高）和
对齐项目：基线（文本对齐）

注意：菜单项的文本位于
菜单项标签
包装中，因为我将向该项添加更多内容（下拉箭头、picto…），但重要的是文本对齐方式


正文{
字体大小：24px；/*大值，便于突出显示错误对齐*/
}
.一些现有的集装箱{
/*这个容器有一些维度：我认为它不会引起冲突*/
宽度：100%；
高度：4em；
显示器：flex；
对齐项目：居中；/*非必填项*/
边框：1px纯蓝色；/*高亮显示*/
}
.菜单{
显示器：flex；
调整项目：基线；
边框：1px纯绿色；/*高亮显示*/
}
.菜单项{
边框：1px点棕色；/*高亮显示*/
}
.菜单项：悬停{
背景色：灰色；/*高亮显示*/
}
.菜单项标签{
边框：1px点粉色；/*高亮显示*/
}
.其他{
左边距：自动；/*将此块放置在某些现有容器中的右侧*/
边框：1px纯紫色；/*高亮显示*/
}
.更大{
字号：4rem；
}
.伸展{
对齐项目：拉伸；
}
变体1：文本对齐，但项目不占据整个高度：

家
项目1
项目2
项目3
其他
变体2：相同和全高但文本未对齐的项目：

家
项目1
项目2
项目3
其他
您是否尝试过使用CSS网格布局？

更新：

抱歉，我没有注意到您已经尝试了网格布局。
但我确实认为通过网格布局可以实现这一点

你介意发布你代码的网格布局版本吗？我也许能帮你

谢谢

因为包装“菜单”没有自己的高度，所以请为其设置高度，例如：


接下来，应添加“菜单项”：

我会保持基线对齐并考虑一个伪元素技巧来增加可提升区域：

正文{
字体大小：24px；/*大值，便于突出显示错误对齐*/
}
.一些现有的集装箱{
高度：4em；
显示器：flex；
对齐项目：居中；
边框：1px纯蓝色；
}
.菜单{
显示器：flex；
调整项目：基线；
边框：1px纯绿色；
溢出：隐藏；
}
.菜单项{
边框：1个点褐色；
位置：相对位置；
z指数：0；
}
.菜单项：：之前{
内容：“；
位置：绝对位置；
z指数：-1；
顶部：-200px；
底部：-200px；
左：0；
右：0；
}
.菜单项：悬停，
.菜单项：悬停：：之前{
背景颜色：灰色；
}
.菜单项标签{
边框：1px点粉色；
}
.其他{
左边距：自动；
边框：1px纯紫色；
}
.更大{
字号：4rem；
}

家
项目1
项目2
项目3
其他
这是我修复了您的css后的结果


正文{
字体大小：24px；/*大值，便于突出显示错误对齐*/
}
.一些现有的集装箱{
/*这个容器有一些维度：我认为它不会引起冲突*/
宽度：100%；
高度：4em；
显示器：flex；
对齐项目：居中；/*非必填项*/
边框：1px纯蓝色；/*高亮显示*/
}
.菜单{
显示器：flex；
调整项目：基线；
/*添加这个css*/
身高：4rem；
///////////////
边框：1px纯绿色；/*高亮显示*/
}
.菜单项{
边框：1px点棕色；/*高亮显示*/
/*添加这个css*/
显示器：flex；
对齐项目：居中；
//////////////////
}
.菜单项：悬停{
背景色：灰色；/*高亮显示*/
}
.菜单项标签{
边框：1px点粉色；/*高亮显示*/
}
.其他{
左边距：自动；/*将此块放置在某些现有容器中的右侧*/
边框：1px纯紫色；/*高亮显示*/
}
.更大{
字号：4rem；
}
.伸展{
对齐项目：拉伸；
}
变体1：文本对齐，但项目不占据整个高度：

家
项目1
项目2
项目3
其他
变体2：相同和全高但文本未对齐的项目：

家
项目1
项目2
项目3
其他
这不是一个合适的答案。请将这样的问题保存在上面的评论部分，您可以在发布答案之前向OP询问更多详细信息。@Ta抱歉，但我目前的声誉很低。我需要50个声誉才能发表评论。哦，是的，我忘了在使用评论部分之前你必须有50个声誉。我道歉。将来，如果你有资格向OP询问更多关于他们问题的信息，可以尝试使用“评论”部分。@TannerDolby，带着感谢的口吻说。是的，
    .menu {
      height: 4rem;
      align-items: stretch
    }

    .menu-item {
      display: flex;
      align-items: center;
    }