使用 CSS flexbox 和 email 模板的网格

Question

Can we use CSS flexbox and grid for making layouts in html email templates? And apart form using tables what possible differences are there in simple html and email templates?

Answer 1

Traditionally, HTML has been the backbone of email, so the most supported way to do email templates is to use the table tag.

is supported in 100% of today's email clients, so no issues there. Grid, however, isn't well supported at all, although display:flex surprisingly works in 84.85% of email clients (it actually has better support than media queries.).

However, flex's related CSS properties (flex-wrap:, align-items:, flex-direction:, justify-content:, etc.) have terrible support — tables are the better choice.

The information is accurate as at 2022.

Source: https://designmodo.com/html-css-emails/

Answer 2

you can use this website to see what tags you can or can not use: for example flex:

https://www.caniemail.com/search/?s=flex

there are no differences between normal css and email css, the only thing is different clients. in normal situations your client is a web browser which is quite feature rich, but in emailingm your client is a email client, like gmail, which can only understand some parts of css and not all of them

my personal choice was to use MJML. its a library for handling your email templates. quite easy to learn and to use.