代码如下:
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;