Блог

У меня есть этот шаблон электронной почты в pug:

 div(style={ display: 'flex', 'justify-content': 'center', 'flex-direction': 'row', 'text-align': 'center'})
            div.image_column
                a(href="#" target="_blank")
                    img.social_media_image(src= 'facebook.png' alt='Facebook')
            div.image_column
                a(href="#" target="_blank")
                    img.social_media_image(src= 'linkedin.png' alt='Linkedin')
            div.image_column
                a(href="#" target="_blank")
                    img.social_media_image(src= 'instagram.png' alt='Instagram')
            div.image_column
                a(href="#" target="_blank")
                    img.social_media_image(src= 'twitter.png' alt='Twitter')
 

локально иконки отлично отображаются в центре
вот изображение

Но в почтовом клиенте, таком как gmail, атрибуты css исчезают. И когда я осматриваюсь, я вижу только эти -> style="display:flex;text-align:center"

У кого-нибудь есть какие-нибудь идеи, почему это происходит ? И у кого-нибудь есть какие-либо предложения о том, как это исправить ?

Gmail поддерживает не все свойства Flexbox. Например, flex-direction не поддерживается. Поддержка функций CSS в почтовом клиенте сильно отличается и более ограничена, чем поддержка браузера.

Вам не нужен Flexbox для выравнивания встроенных элементов, например <a> , по центру. Вы могли бы просто написать это вместо этого:

 div(style='text-align: center;')
  a(href="#" target="_blank")
    img.social_media_image(src='facebook.png', alt='Facebook')
  a(href="#" target="_blank")
    img.social_media_image(src='linkedin.png', alt='Linkedin')
  a(href="#" target="_blank")
    img.social_media_image(src='instagram.png', alt='Instagram')
  a(href="#" target="_blank")
    img.social_media_image(src='twitter.png', alt='Twitter')