微客导航 » 文章资讯 » AngularJS 实现弹性盒子布局的方法

AngularJS 实现弹性盒子布局的方法

2024-03-13 13:51:02 424

最近在写一个简单的布局框架，其实功能大同小异。但目标要求是用尽量简单的代码，实现一些必用的功能。应用在一些要求加载速度快的场合。

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);}
};
}]);

用法:

<divclass="flex-row">
<divflex="1">one</div>
<divflex="6">two</div>
</div>

以上所述是小编给大家介绍的AngularJS实现弹性盒子布局，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持！