html5盒子内排列模型,flex-direction css3属性设定弹性盒子模型子元素反向排列

设定弹性盒子模型(display:flex)让子元素反向排列 示例说明：

display: flex; 声明了盒子为flex弹性盒子布局，flex: 1; 声明了子元素占1份，

flex-direction: row-reverse; /*这个属性就是在水平方向上反转*/

设定弹性盒子模型(display:flex)让子元素反向排列http://zhidao.51xuediannao.com/thread-2.htm - 懒人知道

.ui-flex {

display: flex;

flex-direction: row-reverse; /*这个属性就是在水平方向上反转*/

}

.flex-1{

flex: 1;

}

/*演示用 样式*/

.ui-flex > div{height: 50px; color:#fff}

.ui-flex > div:nth-of-type(1){ background: #ddd}

.ui-flex > div:nth-of-type(2){ background: green}

.ui-flex > div:nth-of-type(3){ background: darkgreen}

1

2

3

设定弹性盒子模型(display:flex)让子元素反向排列 示例说明：

display: flex; 声明了盒子为flex弹性盒子布局，flex: 1; 声明了子元素占1份，

flex-direction: row-reverse; /*这个属性就是在水平方向上反转*/

经测试，谷歌浏览器和IE10及以上浏览器均正常工作，flex布局主要在手机端开发中能大显神威，PC端还是要慎用，除非你做的是一个什么系统，并且可以让用户必须安装谷歌浏览器。