极客观点
项目管理
HarmonyOS
我的一些 HTML 在 2 个网页中运行良好，但有一次，我抓取了容器 div 的 innerhtml 并将其邮寄给用户。
相同的代码，即使它全部在电子邮件代码中，也不会以相同的方式运行。这是只适用于浏览器的东西吗？
这是一些无法正常工作的示例代码：
<div class="flex" style="display: flex; flex-direction: column; margin:11px 0; ">
<div style="order: 2">Growth <strong> 2</strong></div>
<div style="order: 5">Safety <strong>5</strong></div>
<div style="order: 3">Income <strong> 3</strong> </div>
<div style="order: 4">Tax Efficiency <strong>4</strong> </div>
<div style="order: 1">Liquidity <strong> 1</strong></div>
</div>
添加 ：
好的……我在网上找到的大部分内容让我相信显示我之前共享的代码不会转移到电子邮件中。所以我有一个不同的问题……是否有可能，当我将 div 的 innerhtml 保存到字段以插入电子邮件时，我可以在发送到电子邮件之前将子 div 以正确的顺序放置？所以电子邮件只需要显示它，而不是处理它。
很好奇我如何才能真正移动细分……就像经常发生的那样，我被要求在最后一刻这样做并且没有时间学习一个全新的系统，但如果有人知道如何做到这一点并且也许将我指向正确的链接，那会很棒。
非常感谢你们到目前为止的评论。
原文由 Aethon 发布，翻译遵循 CC BY-SA 4.0 许可协议
并非所有电子邮件客户端都支持 flexbox。它显示，它可以工作，请参阅下面的解释，但不是您所期望的方式。我使用 Zurb Foundation for Email 模板 1.05 按原样运行您的示例代码。我没有添加任何 flexbox CSS。我通过 Litmus.com 运行了结果，并使用实际的电子邮件客户端（Outlook、Gmail、Apple Mail）进一步验证了结果。
这是您的结果在 Outlook 2013 中的样子：
这是它在 Gmail 中的外观：
我在测试中看到的结果大多遵循 Outlook 2013 电子邮件的外观，其中包括各种设备上的 Yahoo、AOL、IOS 等。
IOS 设备（如 iPhone 或 iPad）忽略了粗体字符。在 Outlook.com (Hotmail) 中，它看起来更接近 Gmail 显示的结果。
您的代码将与大多数主要电子邮件客户端一起显示，但您的结果不一致并且不会排序。使用 flexbox 和 div 并不是一种可以在所有电子邮件客户端中为您带来最佳结果的方法。
您可以结合特定的 css 来帮助增强您正在尝试做的事情，这样您就可以使用与前端开发相同的代码库。
支持弹性盒
这篇文章已经有好几年了，但 flexbox 可以在 Apple 和 Android 设备上运行，但可能需要一个 -webkit 标签。
display:-webkit-flex;我从来没有添加过那个或任何 flexbox css。Flexbox 不受全面支持，使用它可能会导致比它修复的问题更多的问题。欲了解更多信息，请访问：
https://litmus.com/community/discussions/1500-using-flexbox-in-an-email