CSS让内部元素以相反的顺序显示

代码如下：

1 <div id="main" style=" flex-direction: row-reverse;-webkit-flex-direction: row-reverse;display: flex; ">
2   <div style="background-color:coral;">A</div>
3   <div style="background-color:lightblue;">B</div>
4   <div style="background-color:khaki;">C</div>
5   <div style="background-color:pink;">D</div>
6   <div style="background-color:lightgrey;">E</div>
7   <div style="background-color:lightgreen;">F</div>
8 </div>

显示顺序为：E F D C B A

说明:

1) 样式： flex-direction: row-reverse;-webkit-flex-direction: row-reverse; 使其内部元素反转显示

2）容器必须是弹性盒子才有效，所以要加上样式：display: flex;