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);} }; }]); 用法: one two 以上所述是小编给大家介绍的AngularJS 实现弹性盒子布局,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持! 您可能感兴趣的文章: AngularJs html compiler详解及示例代码 AngularJs bootstrap搭载前台框架——js控制部分 AngularJs bootstrap搭载前台框架——基础页面 AngularJs bootstrap搭载前台框架——准备工作 AngularJs bootstrap详解及示例代码 AngularJs 指令详解及示例代码 Ubuntu系统下Angularjs开发环境安装 利用Angularjs和原生JS分别实现动态效果的输入框 AngularJS轻松实现双击排序的功能 AngularJs concepts详解及示例代码 angularjs 弹性 布局 相关文章 AngularJS中比较两个数组是否相同 这篇文章主要介绍了AngularJS中比较两个数组是否相同,介绍的非常详细,具有参考借鉴价值,感兴趣的朋友一起看下吧 2016-08-08 AngularJS使用ui-route实现多层嵌套路由的示例 这篇文章主要介绍了AngularJS使用ui-route实现多层嵌套路由的示例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧 2018-01-01 angular+ionic 的app上拉加载更新数据实现方法 这篇文章主要介绍了angular+ionic 的app上拉加载更新数据实现方法,需要的的朋友参考下 2017-01-01 解决angular 使用原生拖拽页面卡顿及表单控件输入延迟问题 这篇文章主要介绍了angular 中使用原生拖拽页面卡顿及表单控件输入延迟问题,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下 2020-04-04 AngularJS教程之MVC体系结构详解 本文主要讲解AngularJS MVC体系结构,这里提供详细的教程供大家学习参考,有需要的小伙伴可以参考下 2016-08-08 使用RxJS更优雅地进行定时请求详析 这篇文章主要给大家介绍了关于如何使用RxJS更优雅地进行定时请求的相关资料,文中通过示例代码介绍的非常详细,对大家学习或者使用RxJS具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧 2019-06-06 AngularJS中的按需加载ocLazyLoad示例 本篇文章主要介绍了AngularJS中的按需加载ocLazyLoad,具有一定的参考价值,感兴趣的小伙伴们可以参考一下。 2017-01-01 Angular实现的日程表功能【可添加及隐藏显示内容】 这篇文章主要介绍了Angular实现的日程表功能,带有向日程表中添加内容及隐藏显示内容的功能,涉及AngularJS事件响应及页面元素动态操作相关实现技巧,需要的朋友可以参考下 2017-12-12 AngularJS实现网站换肤实例 这篇文章主要为大家详细介绍了AngularJS实现网站换肤的简单实例,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 2016-12-12 Angular实现的简单定时器功能示例 这篇文章主要介绍了Angular实现的简单定时器功能,结合实例形式分析了AngularJS定时器功能的简单实现与使用技巧,需要的朋友可以参考下 2017-12-12 最新评论

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

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 实现弹性盒子布局,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

您可能感兴趣的文章:

  • AngularJs html compiler详解及示例代码
  • AngularJs bootstrap搭载前台框架——js控制部分
  • AngularJs bootstrap搭载前台框架——基础页面
  • AngularJs bootstrap搭载前台框架——准备工作
  • AngularJs bootstrap详解及示例代码
  • AngularJs 指令详解及示例代码
  • Ubuntu系统下Angularjs开发环境安装
  • 利用Angularjs和原生JS分别实现动态效果的输入框
  • AngularJS轻松实现双击排序的功能
  • AngularJs concepts详解及示例代码
张贴在3