Flex布局+JS：实现可视化的二叉树遍历

最近在学习js和树，要求是实现一个二叉树，布局可以使用Flex，用js实现对二叉树的前中后序遍历。
没学习过Flex，因此特意去看了一下教程。有两个教程写得非常好：
1.Flex布局教程——语法篇
http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html
2.Flex布局教程——实例篇
http://www.ruanyifeng.com/blog/2015/07/flex-examples.html

接下来就开始做可视化地遍历二叉树吧~

---

Flex布局

要求的布局是这样的：

我写的布局是这样的：

这样的布局使用Flex很简单
HTML代码如下：

<div id="tree">
    <div>
        <div>
            <div></div>
            <div></div>
        </div>
        <div>
            <div></div>
            <div></div>
        </