在我的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; 
} 

但这也没有帮助。

请您参考如下方法:

正如本 link 中所解释的那样，似乎对 flex 的支持仍然不合适

Now here are the webmails in which Flexbox is not supported :

• Yahoo
• Gmail
• Outlook.com

Gmail and Outlook.com also filter every properties related to Flexbox, except the property display:flex.

这可能是我什至无法在呈现的电子邮件中看到 justify-content 的原因。