display:flex

Client-by-client behaviour for display:flex

Fully supports display:flex (11): Gmail, Outlook 365, Outlook iOS, Outlook Android, Apple Mail, Apple Mail iOS, Yahoo Mail, Samsung Mail, Thunderbird, HEY Mail, Superhuman.

Partial support (2): Gmail Android, Gmail iOS. Expect rendering quirks unique to each engine — partial support typically means a subset of values, an ignored shorthand, or sanitizer-specific rewrites.

No support (2): Outlook (New), Outlook Classic. Plan fallbacks for these clients before relying on display:flex in production sends.

Fixes & Workarounds

<div style="display: flex; gap: 16px;">
  <div style="flex: 1;">Column 1</div>
  <div style="flex: 1;">Column 2</div>
</div>

<!--[if mso]>
<table role="presentation" width="100%" cellpadding="0"
  cellspacing="0" border="0"><tr>
  <td width="50%" valign="top">Column 1</td>
  <td width="50%" valign="top">Column 2</td>
</tr></table>
<![endif]-->
<!--[if !mso]><!-->
<div style="display: flex; gap: 16px;">
  <div style="flex: 1;">Column 1</div>
  <div style="flex: 1;">Column 2</div>
</div>
<!--<![endif]-->

Production guidance for display:flex

display:flex is a CSS property. Across the email client matrix, 11 of 15 tracked clients support it fully, 2 only partially, and 2 not at all. The clients most likely to require a workaround for this feature are Outlook Classic. Each of them needs a tailored fallback — see the per-client examples above for the specific code fix Emailens recommends.

When in doubt, ship a baseline that renders without display:flex and treat it as progressive enhancement on clients where support is verified. Emailens automatically detects cross-client divergence on this feature when you preview an email, so you can see exactly which template paths break before a campaign goes out.