AngularJS 实现弹性盒子布局的方法
更新时间:2016年08月30日 11:28:21 投稿:mrr
本文给大家带来一段简短代码实现angularjs弹性布局效果,非常实用,对angularjs弹出布局知识感兴趣的朋友可以参考下
最近在写一个简单的布局框架,其实功能大同小异。但目标要求是用尽量简单的代码,实现一些必用的功能。应用在一些要求加载速度快的场合。
CSS部分
.flex-row,.flex{ display: -webkit-flex;display: flex; flex-direction: row; } .flex-col{ display: -webkit-flex; display: flex; flex-direction: column; }
Javascript部分
.directive('flex',[function(){ return { restrict:'A', scope:{'flex':'='}, link:function(s,e,a){e.css('flexGrow',s.flex);} }; }]);
用法:
<div class="flex-row"> <div flex="1"> one </div> <div flex="6"> two </div> </div>
以上所述是小编给大家介绍的AngularJS 实现弹性盒子布局,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!
相关文章
Angular依赖注入optional constructor parameters概念
这篇文章主要为大家介绍了Angular 依赖注入领域里 optional constructor parameters 的概念及使用,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2023-11-11详解Angular中的自定义服务Service、Provider以及Factory
本篇文章主要介绍了详解Angular中的自定义服务Service、Provider以及Factory,具有一定的参考价值,感兴趣的小伙伴们可以参考一下2017-04-04
最新评论