CSSのプロパティがメールに表示されない

Question

私のspreeストアでは、メーラーに注文確認メールを送信するように準備していますが、CSSプロパティ：justify-contentはレンダリングされたメールには表示されません。続き

は私のHTMLです：

<div class="banner"> 
    <img class="height-50perc banner-content" src="https://myUrl" /> 
    <span class="banner-content">Order confirmed</span> 
    </div> 

マイCSS：

.banner { 
    display: flex; 
    height: 80px; 
    background: linear-gradient(90deg, #2e3092 , #0c5fdc); 
    justify-content: space-between; 
} 

.banner-content { 
    margin-top: auto; 
    margin-bottom: auto; 
    margin-left: 10px; 
    margin-right: 10px; 
    color: white; 
    font-size: 20px; 
} 

しかし、レンダリングされた電子メールで、私は、プロパティが表示されない：justify-contentを。私は、対応する要素を検査する場合：

<div class="m_2586726072602943149banner" style="background:linear-gradient(90deg,#2e3092,#0c5fdc);display:flex;height:80px"> 
    .... 
</div> 

お知らせこのdivにはjustify-contentがありません：それはこのようなものです。私はMacでChromeとFirefoxのブラウザで電子メールを表示しています。

私もCSSを変更しようとしている：

.banner { 
    display: -webkit-flex; 
    display: -ms-flexbox; 
    display: flex; 
    height: 80px; 
    background: linear-gradient(90deg, #2e3092 , #0c5fdc); 
    justify-content: space-between; 
    -webkit-justify-content: space-between; 
} 

しかし、これも助けにはなりませんでした。

Answer 1

今ここでこのlink

で説明したように、フレックスのサポートはまだ適切ではないと思われるフレキシボックスがサポートされていないウェブメールされています

• ヤフー
• Gmailの
• Outlook.com

GmailとOutlook.comは、display:flex以外のFlexboxに関連するすべてのプロパティもフィルタリングします。

レンダリングされたメールでjustify-contentが表示されないことがあります。