Css 将div与flex对齐不按预期工作

所以我有一个小部件，它有页眉、正文、页脚和它在页眉中的嵌套div，用于标识、名称和控件。努力使它们正确对齐

正如您在下面看到的-[Name]和[Ctrls]不出现在水平线的中心（如在徽标的中间，对齐self:center；），这是我无法理解的原因。你知道我遗漏了什么吗

.card{
位置：相对位置；
显示：-ms flexbox；
显示：-网络工具包盒；
显示器：flex；
调整项目：灵活启动；
-ms-flex方向：列；
-网络工具包盒方向：垂直；
-webkit盒方向：正常；
弯曲方向：立柱；
最小宽度：0；
单词包装：打断单词；
背景色：#fff；
背景剪辑：边框框；
边框：1px实心rgba（0,0,0,125）；
溢出：隐藏；
透视图：1px；
边界半径：10px；
颜色：#1B65B3；
}
.卡：悬停{
边框顶部：2个实心#6777ef；
}
.card header>div{
显示器：flex；
弯曲方向：行；
柔性包装：nowrap；
保证金：5px；
}
.卡头{
背景标题：#标题；
背景色：#FFCD42；
宽度：100%；
}
.卡片标识{
浮动：左；
背景色：#63B0C0；
左边距：200px；
宽度：20%；
}
.卡名{
浮动：左；
背景色：#14ADCF；
自对准：居中；
高度：30px；
}
.卡头.卡名{
自对准：居中；
}
.信用卡控制{
浮动：对；
背景色：#6AC239；
宽度：10%；
}
.卡体{
背景色：#3cb371；
宽度：100%；
}
.卡片页脚{
背景色：#D83790；
宽度：100%；
}

[姓名]
[CTRL]
[正文]
[卡片页脚]

您需要将flex放在header容器上，而不是子div上，然后您可以移除浮动，align self将起作用

为了使ctrl向右，我还使用了标题上的

justify content:space-between

，然后在名称上使用margin right auto

.card{
位置：相对位置；
显示：-ms flexbox；
显示：-网络工具包盒；
显示器：flex；
调整项目：灵活启动；
-ms-flex方向：列；
-网络工具包盒方向：垂直；
-webkit盒方向：正常；
弯曲方向：立柱；
最小宽度：0；
单词包装：打断单词；
背景色：#fff；
背景剪辑：边框框；
边框：1px实心rgba（0,0,0,125）；
溢出：隐藏；
透视图：1px；
边界半径：10px；
颜色：#1B65B3；
}
.卡：悬停{
边框顶部：2个实心#6777ef；
}
.card header>div{
保证金：5px；
}
.卡头{
背景标题：#标题；
背景色：#FFCD42；
显示器：flex；
弯曲方向：行；
柔性包装：nowrap；
证明内容：之间的空间；
宽度：100%；
}
.卡片标识{
背景色：#63B0C0；
左边距：200px；
宽度：20%；
}
.卡名{
背景色：#14ADCF；
自对准：居中；
高度：30px；
}
.卡头.卡名{
自对准：居中；
右边距：自动；
}
.信用卡控制{
背景色：#6AC239；
宽度：10%；
自对准：居中；
}
.卡体{
背景色：#3cb371；
宽度：100%；
}
.卡片页脚{
背景色：#D83790；
宽度：100%；
}

[姓名]
[CTRL]
[正文]
[卡片页脚]

您的卡头不是柔性容器哦，我真傻！我错过了！谢谢