Flex 容器内的子元素叫做容器的项目（item），通过设置 Flex 容器的 CSS 可以统一设置项目的排列顺序和对齐方式，通过项目的 CSS 则可以控制单个项目的缩放、排列顺序、对齐方式等。

order

order，设置 item 的排列优先级，默认为0，数字小越先排列，可为负。
如下图，a 方块order:1，所以排到了最后。
item-order.png

- 阅读剩余部分 -

Flex 容器（container）有两根轴线，主轴和交叉轴，相互垂直，容器的子元素（item）默认沿主轴排列。

flex-direction

flex-direction设置 item 在主轴上的排列方向，默认为row，表示水平方向从左到右。还有其他三个值：row-reverse（水平方向从右到左）、column竖直方向从上到下、column-reverse（竖直方向从下到上）。
flex.png

- 阅读剩余部分 -

Tablesorter是一个JQuery插件，功能是对标准的table进行排序，很简单，只要一句JS代码就能实现点击表头排序的功能，但也很强大，通过设置也能实现表头锁定，Ajax加载数据，分页，主题，复杂表头，表格嵌套等等功能，官方的API头都可以给你看大?。

简单开始

引用JS文件

<script type="text/javascript" src="jquery.min.js"></script> 
<script type="text/javascript" src="jquery.tablesorter.js"></script>

构造标准的表格

<table id="myTable" class="tablesorter"> 
<thead> 
<tr> 
    <th>Last Name</th> 
    <th>First Name</th> 
    <th>Email</th> 
    <th>Due</th> 
    <th>Web Site</th> 
</tr> 
</thead> 
<tbody> 
<tr> 
    <td>Smith</td> 
    <td>John</td> 
    <td>jsmith@gmail.com</td> 
    <td>$50.00</td> 
    <td>http://www.jsmith.com</td> 
</tr> 
<tr> 
    <td>Bach</td> 
    <td>Frank</td> 
    <td>fbach@yahoo.com</td> 
    <td>$50.00</td> 
    <td>http://www.frank.com</td> 
</tr> 
<tr> 
    <td>Doe</td> 
    <td>Jason</td> 
    <td>jdoe@hotmail.com</td> 
    <td>$100.00</td> 
    <td>http://www.jdoe.com</td> 
</tr> 
<tr> 
    <td>Conway</td> 
    <td>Tim</td> 
    <td>tconway@earthlink.net</td> 
    <td>$50.00</td> 
    <td>http://www.timconway.com</td> 
</tr> 
</tbody> 
</table>

对表格应用Tablesorter

$(document).ready(function() 
    { 
        $("#myTable").tablesorter(); 
    } 
);

到此你的表格就已经被赋予了排序功能，排序点击表头即可~
tablesorter.jpg

没看错，默认的表格就是这么丑，不过Tablesorter支持主题，往下看
引用主题css文件

<link rel="stylesheet" href="theme.dropbox.css">

注册主题

$("#myTable").tablesorter({
    theme:"dropbox"
});

tablesorter1.jpg

瞬间回到现代，这是个dropbox风格主题。

- 阅读剩余部分 -

1