CSS property · 11 real installs 14 Oct 2026 · data last changed 10 Nov 2026
display:flex in email clients
Works in 18 of 21. Not supported in Outlook Classic. Partial in Gmail Android and Gmail iOS.
Your reader in Outlook Classic sees the email without display:flex, even if it looks right where you tested it.
caniemail (MIT) via @emailens/engine 0.18.22
The fix for Outlook Classic
Use table layout as fallback for flexbox in Outlook
<!--[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]-->Show the original
<div style="display: flex; gap: 16px;">
<div style="flex: 1;">Column 1</div>
<div style="flex: 1;">Column 2</div>
</div>The checker needs a computer screen.
A free account opens all 21 clients and keeps your checks for 7 days. Create a free account →
display:flex on 11 real installs
One Emailens probe, screenshotted on each install on 14 October 2026, next to our live preview of the same client. Where display:flex is supported you should see: three boxes in a row.
caniemail: display:flex is not supported in Outlook Classic.
caniemail: display:flex works in Outlook 365.
This Outlook.com install drops the <style> in the head, so only inline styles apply.
caniemail: display:flex works in Apple Mail.
caniemail: display:flex works in Apple Mail iOS.
caniemail: display:flex works in Yahoo Mail.
Also captured, not counted as evidence (4)
- Outlook for Microsoft 365 · not mapped to an engine client yet Real screenshot
- Outlook 2019 for Mac (legacy app) · not counted as Outlook for Mac Real screenshot
This is the legacy Outlook for Mac app. The new Outlook for Mac, which the table describes, drops gradients, grid sizing functions, var() and more.
- Gmail (web) · not counted as Gmail Real screenshot
This Gmail install does not apply Gmail's sanitiser, so it shows more than real Gmail does.
- Windows Mail · not mapped to an engine client yet Real screenshot
Every account includes one free real-device check in classic Outlook, Outlook for Mac and Apple Mail, after you verify your email and run one preview, while this month's free capacity lasts. How real-device checks work →
All 21 clients, problems first
| Client | Support |
|---|---|
| Outlook Classic | Not supported |
| Gmail Android | Partial See caveat 1 |
| Gmail iOS | Partial See caveat 1 |
Works in 18: Gmail, Outlook 365, Outlook (New) and 15 more. Show all
| Client | Support |
|---|---|
| Gmail | Works |
| Outlook 365 | Works |
| Outlook (New) | Works |
| Outlook iOS | Works |
| Outlook Android | Works |
| Outlook for Mac | Works |
| Apple Mail | Works |
| Apple Mail iOS | Works |
| Yahoo Mail | Works See caveat 2 |
| Yahoo Mail Android | Works See caveat 2 |
| Yahoo Mail iOS | Works See caveat 2 |
| Samsung Mail | Works |
| Thunderbird | Works |
| HEY Mail | Works |
| Proton Mail | Works |
| AOL Mail | Works See caveat 2 |
| Fastmail | Works |
| Superhuman | Works |
Caveats (2)
- 1. Gmail Android, Gmail iOS: Not supported with non Google accounts.
- 2. Yahoo Mail, Yahoo Mail Android, Yahoo Mail iOS, AOL Mail:
display:inline-flexis not supported.
Caveats as recorded by caniemail (MIT), one entry per wording.
How display:flex behaves
display:flex works in Gmail, Apple Mail, Yahoo Mail, AOL Mail and every Outlook except Outlook Classic, which ignores it, so a flex row there becomes boxes stacked one under another. The Gmail apps apply it for Google accounts only. The catch is elsewhere: Gmail, Yahoo Mail and AOL Mail keep display:flex but drop the flex shorthand and flex-basis, so items set to flex: 1 or flex: 0 0 34% shrink to fit their content.
- Outlook Classic ignores display:flex. The container and its items render as ordinary blocks, and since it also ignores width on a div, each item spans the full width.
- Gmail, Yahoo Mail and AOL Mail drop the flex shorthand and flex-basis. In our probes on Yahoo Mail web (October 27, 2026) and Gmail web (October 28, 2026), an item at flex: 0 0 34% shrank until words broke letter by letter in Yahoo and sized to its content in Gmail. width: 34% on the same item held in both.
- Gmail Android and Gmail iOS apply display:flex only for Google accounts. Someone reading an Outlook or Yahoo address through the Gmail app gets no flex layout.
- Yahoo Mail and AOL Mail do not support display:inline-flex. Use display:flex.
- Proton Mail web keeps display:flex, but when we read delivered messages on November 4, 2026, it removed flex, justify-content, align-items and gap from any inline style that also held another property, such as padding. A style holding only those properties was left as written.
- In our real-client check on October 27, 2026, real Gmail web, Apple Mail and the new Outlook for Mac all applied display:flex.
Size flex items with width in percent, not with flex or flex-basis, so Gmail, Yahoo Mail and AOL Mail keep the column widths. For Outlook Classic, put a table version of the row inside <!--[if mso]> conditional comments and wrap the flex version in <!--[if !mso]><!--> so Outlook Classic skips it. Only Outlook Classic reads those comments, so every other client gets the flex row. If you would rather keep one layout, a table with a width on each cell works in every client.
Questions
Which email clients support display:flex?
Gmail, Apple Mail, Apple Mail iOS, Yahoo Mail, AOL Mail, Outlook 365, Outlook (New), Outlook for Mac, Outlook iOS, Outlook Android, Samsung Mail, Thunderbird, HEY Mail, Proton Mail, Fastmail and Superhuman. Gmail Android and Gmail iOS support it for Google accounts only. Outlook Classic does not support it.
Does display:flex work in Gmail?
Yes. Gmail on the web applies display:flex but drops the flex shorthand and flex-basis, so set item widths with width. The Gmail apps apply display:flex only for Google accounts.
Does display:flex work in Outlook?
Every Outlook except Outlook Classic supports it: Outlook 365, Outlook (New), Outlook for Mac, Outlook iOS and Outlook Android. Outlook Classic ignores it, so give it a table inside an [if mso] conditional comment.
Your next question
- Does word-break work in Outlook Classic?
Works in 4 of 21 · partial in 12 · not supported in 5
fix - Does display:grid work in Outlook Classic?
Works in 18 of 21 · partial in 2 · not supported in 1
fix - Does border-spacing work in Outlook Classic?
Works in 17 of 21 · not supported in 2 · 2 untested
fix - Does border-radius work in Outlook Classic?
Works in 16 of 21 · partial in 4 · not supported in 1
fix - Does visibility work in Outlook Classic?
Works in 13 of 21 · not supported in 8
fix - Does text-shadow work in Outlook Classic?
Works in 12 of 21 · not supported in 9
fix
display:flex in Outlook Classic · Every feature in Outlook Classic · All email CSS features · What real installs show
Paste your email
Get new email CSS fixes by email.