Formatação de HTML/CSS para E-mail

🏷️ HTML/CSS para E-mail (G-mail / Outlook / Hotmail) 
 
 Status da Regra: 🟢 Ativa 
 Impacto: 🟡 Médio 
 Area(s):
 
 HTML 
 CSS 
 E-mail 
 Plataforma do cliente 
 Automações 
 n8n 
 
 
 
 
 📌 Contexto 
 
 Emails renderizam diferente de navegadores. O Gmail não suporta corretamente Flexbox. 
 
 
 ⚠️ Problema 
 
 display: flex 
 justify-content 
 align-items 
 grid 
 margin: auto 
 
 
 
 ➡️ Observações 
 
 Podem quebrar layout ou alinhar tudo à esquerda se usar um dos acima. 
 
 
 ✅ Padrão adotado 
 
 Usar layout com <table> 
 Centralização via align e estrutura de tabela 
 
 
 ⛔ Evitar 
 
 Flexbox 
 Grid 
 Técnicas modernas de layout web, como os listados acima. 
 
 
 ⭐ Regra de ouro 
 
 Se for email e/ou Gmail → usar o  table-based layout sempre 
 
 
 🔗 Material de Apoio 
 Referência rápida para uso prático. 
 
 Devhints Cheat Sheets • HTML email