CSS3 flex弹性盒模型布局（三）

一.项目排序方式及所占比例：order flex属性

1. order属性：

定义项目的排列顺序。数值越小，排列越靠前，默认为0。

<ul>
      <li>1</li>
      <li style="order:5;">2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>
      <li>6</li>
      <li>7</li>
</ul>

此时，第二个li的order值为5，其他的order值为0，所以这个li会排在最后一位

2. flex属性：

定义项目所占位置比例。

<ul>
      <li>1</li>
      <li style="flex:3;">2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>
      <li>6</li>
      <li>7</li>
</ul>

此时，第二个li位置独占3倍