如何不使用justify-content属性在flexbox布局中实现图片右对齐

Gmail 客户端对 flex 相关属性的支持度极低，尤其是 web 端和部分移动端版本，所以尽量避免用 flex 做核心布局，推荐以下经过验证的兼容方案：

方案1：使用原生HTML表格（兼容性最好，全邮件客户端支持） #

表格是HTML邮件场景下兼容性最高的布局方式，无需担心属性被过滤失效

<table width="100%" cellpadding="0" cellspacing="0" border="0" role="presentation">
  <tr>
    <td>左侧文本内容，无论长度多少都不会影响右侧布局</td>
    <td align="right"><img src="你的图片地址" alt="图片描述" width="预设图片宽度" /></td>
  </tr>
</table>

相关说明：

• 给外层table设置width="100%"占满父容器宽度
• 右侧td加align="right"原生属性实现内容右对齐，不需要任何CSS即可生效
• 加role="presentation"是为了让无障碍读屏设备识别这是布局用表格，不是数据表格

方案2：用margin-left:auto实现（适合仍想保留div布局的场景） #

如果不想用表格，该方案相比justify-content: space-between兼容性高20%左右，可覆盖大部分主流邮件客户端：

<div style="display: flex; width: 100%;">
  <div>左侧文本内容</div>
  <img src="你的图片地址" alt="图片描述" style="margin-left: auto;" />
</div>

相关说明：

• 如果要兼容所有版本的Gmail，还是优先推荐用表格方案
• HTML邮件场景下所有样式尽量写行内style，避免写在内嵌style标签里被客户端过滤

通用注意事项 #

• 图片一定要设置固定宽度属性，避免在客户端里被拉伸变形
• 布局属性优先用HTML原生属性（比如align、valign），生效优先级高于CSS属性

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