flex 布局在邮件模板中完全失效，因gmail、outlook、apple mail等主流客户端不支持display: flex及相关属性，必须用table布局并内联样式实现兼容。
Flex 布局在邮件模板中根本不会被解析，不是“显示异常”，而是直接失效——Gmail、Outlook、Apple Mail 等主流客户端压根不认 display: flex，所有相关属性（justify-content、align-items、flex-wrap）全被丢弃。你看到的错乱，是浏览器降级为普通块级流渲染的结果。
为什么 display: flex 在邮件里等于没写
邮件客户端用的不是现代浏览器引擎：Outlook Desktop 用 MS Word 渲染器，Gmail Web 版主动剥离 CSS3 布局声明，iOS Mail 只支持 HTML 4 + CSS 2.1 子集。它们连 float 和 position 都支持不全，更别说 Flexbox。你在 <style></style> 里写的整段规则，在发出去那一刻就被过滤掉了。
常见错误现象：
- 代码里
display: flex; justify-content: space-between;写得再漂亮，Gmail 里两个元素垂直堆在左上角 - 用
flex-direction: column做移动端适配？媒体查询本身在 Gmail 中大概率不执行 - 依赖
align-items: center垂直居中图片和文字？实际渲染时图片顶部对齐，文字下沉
table 布局不是备选，是唯一可行路径
必须用 <table> 替代所有容器级布局，且嵌套层级要克制（Outlook 对深度 > 3 的嵌套易出错）。关键不是“能不能用”，而是“不用就会崩”。
<p>实操要点：</p><div class="aritcle_card flexRow artxards">
<div class="artcardd flexRow">
<a class="aritcle_card_img" rel="nofollow" href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板"><img
src="https://img.php.cn/upload/webcode/000/000/018/178607072210981.jpg" alt="CSS婚礼策划服务机构宣传网站模板" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a rel="nofollow" href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板" class="overflowclass">CSS婚礼策划服务机构宣传网站模板</a>
<p class="overflowclass">CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。</p>
</div>
<a rel="nofollow" href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
</a>
</div>
</div>
<ul><li><code><table width="600"> 固定总宽度，防止 Gmail 自动缩放破坏比例
<li>左右分栏不用 <code>flex: 1，改用并排 <td width="50%">，并显式设 <code>valign="top"
text-align: center 或 justify-content，而用 <td align="center">
<li>避免 <code>border-collapse: collapse —— Outlook 不识别，每个 <td> 单独加 <code>style="border: 1px solid #ccc;"
内联样式不是优化项，是硬性准入门槛
所有样式必须写进 style 属性，<style></style> 会被剥离，class 名可能被过滤，!important 在多数客户端无效。
容易踩的坑：
- 写
<p class="title"></p>并在<style></style>里定义，结果标题变成默认字号和颜色 - 用
margin控制间距？Gmail 和 Outlook 几乎全部忽略，改用padding或空<td height="20"></td> - 图片只写
style="max-width: 100%;"？QQ 邮箱会拉伸变形，必须同时带width和height属性 - 用
nth-child实现斑马纹表格？Outlook 和 Gmail 完全不支持，手动给每个<tr> 加 <code>bgcolor="#f9f9f9"真机测试比任何预览都重要
本地浏览器渲染完美 ≠ 邮件能看。Gmail Android App、Outlook iOS、Apple Mail 对
width百分比、img的alt处理、嵌套<table> 深度的理解各不相同。最容易被忽略的是：Outlook Desktop（尤其是 2016/2019）强制放大 <code>font-size，必须显式设line-height: 1.4；Gmail Web 版会重写你的<style></style>并加!important，但只对它认得的属性生效——所以别指望它帮你兜底。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
