display:flex

Client-by-client behaviour for display:flex

Fully supports display:flex (17): Gmail, Outlook 365, Outlook iOS, Outlook Android, Outlook for Mac, Apple Mail, Apple Mail iOS, Yahoo Mail, Yahoo Mail Android, Yahoo Mail iOS, Samsung Mail, Thunderbird, HEY Mail, Proton Mail, AOL Mail, Fastmail, 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, 17 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.