郁闷吧 微信小程序 4188479 63242849 39070147 130690866
还没有任何记录...

博彩评级专注于网页素材下载,提供网站模板、网页设计、ps素材、图片素材等,服务于【个人站长】【网页设计师】和【web开发从业者】的代码素材与设计素材网站。

博彩评级提供网页素材下载、网站模板
这一切都是免费的!
当前位置:博彩评级 > div+css > css教程 >

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)让子元素反向排列 示例说明:

本文地址:http://www.qqydc.com/html+css/htmlcssjq/flex-direction.html
文章摘要: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://www.qqydc.com/321/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属性设定弹性盒子模型子元素反向排列http://www.qqydc.com/html+css/htmlcssjq/flex-direction.html

flex-direction css3属性设定弹性盒子模型子元素反向排列由博彩评级收集整理,您可以自由传播,请主动带上本文链接

博彩评级就是免费分享,觉得有用就多来支持一下,没有能帮到您,懒人也只能表示遗憾,希望有一天能帮到您。

(责任编辑:博彩评级)