AngularJS 实现弹性盒子布局
发布时间:2020-12-17 10:00:00 所属栏目:安全 来源:网络整理
导读:最近在写一个简单的布局框架,其实功能大同小异。但目标要求是用尽量简单的代码,实现一些必用的功能。应用在一些要求加载速度快的场合。 CSS部分 .flex-row,.flex{ display: -webkit-flex;display: flex; flex-direction: row;}.flex-col{ display: -webkit
最近在写一个简单的布局框架,其实功能大同小异。但目标要求是用尽量简单的代码,实现一些必用的功能。应用在一些要求加载速度快的场合。 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> (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |