Skip to main content
Emailens/Email CSS Support
Test Your Email

display:flex in Outlook Classic

UnsupportedMicrosoft Word · desktop

Fix & Workaround

Use <table> layouts with <!--[if mso]> conditional comments for Outlook's Word engine.

Before

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

After

<!--[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]-->

Use table layout as fallback for flexbox in Outlook

Other Clients

ClientSupport
GmailSupported
Gmail AndroidPartial
Gmail iOSPartial
Outlook 365Supported
Outlook (New)Unsupported
Outlook iOSSupported
Outlook AndroidSupported
Outlook for MacSupported
Apple MailSupported
Apple Mail iOSSupported
Yahoo MailSupported
Yahoo Mail AndroidSupported
Yahoo Mail iOSSupported
Samsung MailSupported
ThunderbirdSupported
HEY MailSupported
Proton MailSupported
AOL MailSupported
FastmailSupported
SuperhumanSupported

Related Features

!importantaccent-coloralign-itemsanimationaspect-ratiobackdrop-filter

Test your email across all 21 clients

Preview rendering, catch CSS issues, and get actionable fixes. Free.

Try Emailens Free