<ul class="box">
<li class="item" style="order:10">1</li>
<li class="item" style="order:11">2</li>
<li class="item">3</li>
<li class="item">4</li>
<li class="item">5</li>
<li class="item">6</li>
<li class="item">7</li>
<li class="item">8</li>
<li class="item">9</li>
</ul>
可以看到，1 号因为 order 设置为10排到了后面； 而2号因为更加大的order 而排到最后。
flex-grow 多余空间分配比例
它的值是一个number，默认为0；只要有一个同轴元素被设定了flex-grow ，所有多余空间都会按照这个比例分配，并让元素占满整行。这个被分配的空间，是算在自身里面的；
<ul class="box">
<li class="item" style="flex-grow:1;">1</li>
<li class="item" style="flex-grow:2;">2</li>
<li class="item">3</li>
<li class="item">4</li>
<li class="item">5</li>
<li class="item">6</li>
<li class="item">7</li>
<li class="item">8</li>
<li class="item">9</li>
</ul>
盒子宽度变大了，（就是grow啦）
如果子元素有margin，那么会先计算横排多少个，再决定 flex-grow 分配的空间是多少
例如如下代码，
//没有设定 flex-grow 时
<li class="item" style="flex-grow:0;margin: 0 100px;">1</li>
<li class="item" style="flex-grow:0;">2</li>
//设定了 flex-grow 时
<li class="item" style="flex-grow:2;margin: 0 100px;">1</li>
<li class="item" style="flex-grow:1;">2</li>
