Can we use CSS Flexbox in HTML Emails?

How good is the support for Flexbox in HTML Emails? Do you think all the layout issues would be solved if Email clients properly implement Flexbox?

Start a personal dev blog on your domain for free and grow your readership.

3.4K+ developers have started their personal blogs on Hashnode in the last one month.

Write in Markdown 路 Publish articles on custom domain 路 Gain readership on day zero 路 Automatic GitHub backup and more

Alkshendra Maurya's photo

Sadly, no.

Though the support for display property is good-ish, it's not supported in all the clients. So even if it works for you, you won't know where it breaks.

Honestly, even without flexbox support, most of the layout problems would be solved with simple-basic CSS3 support that is standard in all clients.

For now though, you're stuck with <table> and CSS2 support for your layouts.

You can follow this cheatsheet to know what is supported and what is not: campaignmonitor.com/css/b


P.S.

There is a lot of variation in styling support among different mail clients and the same has been discussed on hashnode at times. you'll get some good tips for email styling here:

Creating an HTML Email is such a pain in 2016! What's the best way to create one?

Why is there so much variation in email CSS support amongst different clients?

How do you test your HTML emails?

Hope it helps! 馃槂

Rodrigo Garcia's photo

Short answer is NO, hell NO.

HTML in emails is somehow in a forgotten world and is about lots of years behind us. If you're trying to use flexbox as a responsive way to adapt your mails in different devices, well there's a framework for that called MJML hope it works for you.

Jan Vladimir Mostert's photo

No, most css doesn't work in emails, stick to tables and images. There are ways to get responsive emails, but I haven't used it yet to be able to comment on the quality of those solutions.