时常遇到要将多个li项翻转显示的需求~可以编写相应的js来实现~但在支持flexBox布局的浏览器中可以利用这一布局的特性巧妙地实现li的翻转显示~
实现如下:(可以使用注释起来的方式快速生成多个li标签~)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> ul { display: flex; flex-direction: column-reverse; } </style> </head> <body> <ul> <!-- (li{$})*1000 --> </ul> </body> </html>
也可以实现写好对应的样式类~在合适的时候通过js在ul上加上这个类~
原文:http://www.cnblogs.com/Liujunyan/p/5281883.html