Trouble having CSS order (flex box) work in an ema

问题:

I have got some HTML working fine in 2 web pages, but at one point, I grab the innerhtml of the container div and mail that to the user.

The same code, even when it's all in the email code, doesn't function the same way. Is this something that only works in browsers?

Here is some sample code that isn't working as I'd like :

<div class="flex" style="display: flex; flex-direction: column; margin:11px 0; ">
<div style="order: 2">Growth <strong> 2</strong></div>
<div style="order: 5">Safety <strong>5</strong></div>
<div style="order: 3">Income <strong> 3</strong> </div>
<div style="order: 4">Tax Efficiency <strong>4</strong> </div>
<div style="order: 1">Liquidity <strong> 1</strong></div>
</div>

ADDITION :

OK... most of what I'm finding around on the web, leads me to believe that displaying the code that I shared earlier will not transfer to email. So I have a different question.... is it possible, that when I save the div's innerhtml to the field for insertion into the email that I can put the sub divs in the correct order BEFORE sending to the email? so the email just has to display it, not process it.

So curious how I can actually move the subdivs around... as often happens, I got asked to do this at the last minute and don't have time to learn an entirely new system, but if someone knows how this can be done and maybe point me to the right link, that would be great.

Thanks very much guys for your comments so far.

回答1:

Is this something that only works in browsers?

In a way, yes.

Most email clients only support very basic HTML and certainly nothing newer. Don't rely on new HTML/CSS/JavaScript to work in them properly; even older doesn't always work well - still need to lay out pages with tables and use inline styles for visuals.

回答2:

Using flexbox (or any of the modern css methodologies) in email templates is simply no good.

You can find information about what to use in an email template here.

If this is your first time building an email template, I suggest that you use a semantic framework for doing this with a bit of ease. An email building framework takes into consideration all the requirements for a responsive email that is displayed in the same way across various email clients.

As from my experience so far, Foundation for emails (zurb email stack) is the best option of doing so. Like I said, it is semantic, and easy to understand (and use). Everything is automated for you, it even has browser-sync applied to it.

Sample syntax:

<container>
  <row>
    <columns small="12" large="6">Column One</columns>
    <columns small="12" large="6">Column Two</columns>
  </row>
</container>

July 07 2019 - UPDATE: You can also use a nice little tool by the folks at MJML which allows for even easier template creation, because of its own editor and live template view.

回答3:

flexbox isn't supported by all email clients. It displays, it can work, see below for an explanation, but not the way you may expect. I ran your sample code as-is using Zurb Foundation for Email template 1.05. I did not add any flexbox CSS. I ran the results through Litmus.com and further verified the results with actual email clients (Outlook, Gmail, Apple Mail).

This is how your results looked in Outlook 2013:

This is how it looks in Gmail:

The results I saw in testing mostly follows the look of Outlook 2013 email, which includes Yahoo, AOL, IOS on various devices and others.

Bold characters were ignored by IOS devices like an iPhone or an iPad. In Outlook.com (Hotmail), it looks closer to the results shown with Gmail.

Your code will display with most major email clients, but your results not be consistent and it will not sort. Using flexbox and divs is not an approach that will bring you the best results across all email clients.

You could combine specific css to help enhance what you are attempting to do, so that you can use the same code base as you might with front-end development.

Flexbox is supported

This article is several years old, but flexbox works on Apple and Android devices, but might require a -webkit tag. display:-webkit-flex; I never added that or any flexbox css.

Flexbox is not supported across the board and using it might cause more problems than it fixes. For more information, visit:

https://litmus.com/community/discussions/1500-using-flexbox-in-an-email