设定弹性盒子模型(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端还是要慎用,除非你做的是一个什么系统,并且可以让用户必须安装谷歌浏览器。