为什么部分CSS样式无法在HTML邮件模板中正常生效？

根本原因 #

绝大多数邮件客户端（包括各版本Outlook、国内主流的QQ邮箱、网易邮箱，以及部分移动端自带邮箱应用）对CSS Flexbox的支持度非常有限，仅能识别最基础的display: flex声明，justify-content、align-items这类Flex对齐属性完全不被兼容，因此会出现你遇到的部分Flex属性生效、对齐属性失效的问题。

解决方案 #

优先方案：切换为邮件场景兼容的传统布局 #

放弃Flex布局，用兼容性更好的基础CSS属性还原设计效果，修改后的代码参考如下：

.wrap{
    width: 100%;
    font-size: 0; /* 消除inline-block元素自带的默认间距 */
}
.child{
    display: inline-block;
    width: 45px;
    height: 45px;
    /* 替代flex的居中对齐属性 */
    line-height: 45px;
    text-align: center;
    background-color: blanchedalmond;
    border-radius: 50%;
    /* 调整margin数值实现原justify-content: space-around的间距效果，可根据容器总宽度微调数值 */
    margin: 0 1.2%;
}

原HTML结构不需要做任何修改，直接替换CSS即可实现和原来一致的效果，且兼容99%以上的邮件客户端。

备选方案：增加私有前缀兼容（覆盖范围有限） #

如果必须保留Flex写法，可以给对齐属性添加webkit前缀做部分兼容，修改后的CSS参考如下：

.wrap{
    display:flex;
    justify-content: space-around;
    /* 兼容webkit内核的邮件客户端 */
    -webkit-justify-content: space-around;
}
.child{
    display: flex;
    width: 45px;
    height: 45px;
    background-color: blanchedalmond;
    border-radius: 50%;
    justify-content: center;
    -webkit-justify-content: center;
    align-items: center;
    -webkit-align-items: center;
}

该方案仅能覆盖部分基于webkit内核的邮箱，无法兼容Outlook等老旧客户端，不推荐优先使用。

额外注意事项 #

邮件场景的CSS兼容度远低于普通网页，除Flex外，Grid布局、position: sticky、CSS变量、CSS动画等特性的支持度都极低，开发邮件页面时建议优先使用table布局、inline-block、基础文本属性等最原始的CSS特性实现需求。

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