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

Question

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.

Answer 1

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.

Answer 2

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.