flex-direction css3属性设定弹性盒子模型子元素反向排列
作者：佳明妈 来源：web前端开发 2016-08-10 人气：flex-direction css3属性设定弹性盒子模型子元素反向排列，display: flex; 声明了盒子为flex弹性盒子布局，flex: 1; 声明了子元素占1份，flex-direction: row-reverse; /*这个属性就是在水平方向上反转
flex-direction css3属性设定弹性盒子模型子元素反向排列
设定弹性盒子模型（display:flex）让子元素反向排列 示例说明：
display: flex; 声明了盒子为flex弹性盒子布局，flex: 1; 声明了子元素占1份，
flex-direction: row-reverse; /*这个属性就是在水平方向上反转*/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>设定弹性盒子模型（display:flex）让子元素反向排列http://zhidao.51xuediannao.com/thread-2.htm - 懒人知道</title>
<style>
.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}
</style>
</head>
<body>
<div class="ui-flex" style="width: 500px;">
<div class="flex-1">1</div>
<div class="flex-1">2</div>
<div class="flex-1">3</div>
</div>
<h4>设定弹性盒子模型（display:flex）让子元素反向排列 示例说明：</h4>
<p>display: flex; 声明了盒子为flex弹性盒子布局，flex: 1; 声明了子元素占1份，</p>
<p>flex-direction: row-reverse; /*这个属性就是在水平方向上反转*/</p>
</body>
</html>
经测试，谷歌浏览器和IE10及以上浏览器均正常工作，flex布局主要在手机端开发中能大显神威，PC端还是要慎用，除非你做的是一个什么系统，并且可以让用户必须安装谷歌浏览器。
↓ 查看全文
flex-direction css3属性设定弹性盒子模型子元素反向排列由懒人建站收集整理，您可以自由传播，请主动带上本文链接
懒人建站就是免费分享，觉得有用就多来支持一下，没有能帮到您，懒人也只能表示遗憾，希望有一天能帮到您。
flex-direction css3属性设定弹性盒子模型子元素反向排列-最新评论