Holy shit trying to learn flex-box and only when I turn on reverse-row does everything fall out of its containing boxes. Then I find out that because I'm not hardcore enough to roll my own CSS scaffolding and therefore using material design lite that it is also trying to use flex box plus a few floats here and there......
... First real need to rant, glad I had this outlet

Heard good things about flexbox.

I'm building a chat UI (not under the illusion I'll be taking over the world more to play with service worker) and to emulate the messages UI where if it's my message it should all be right aligned vs left aligned if the message is not from me is (or should be) as easy as setting flex-direction: row-reverse and it flips the order of all the elements in the container.

Difference in the layouts attached is like 3 lines of CSS.

don't use floating blocks for inline elements, use inline-block and align instead