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

您可能感兴趣的文章:

3个可以改善用户体验的AngularJS指令介绍
这篇文章主要介绍了3个可以改善用户体验的AngularJS指令,AngularJS是一款具有很高人气的JavaScript框架,需要的朋友可以参考下
2015-06-06
详解利用Angular实现多团队模块化SPA开发框架
本篇文章主要介绍了详解利用Angular实现多团队模块化SPA开发框架，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-11-11
深入浅析angular和vue还有jquery的区别
vue是一个渐进式的框架, 是一个轻量级的框架而angular是一个mvc框架, 各有千秋，下面小编通过本文给大家介绍angular和vue还有jquery的区别，感兴趣的朋友一起看看吧
2018-08-08
AngularJS自定义表单验证功能实例详解
这篇文章主要介绍了AngularJS自定义表单验证功能,结合完整实例形式详细分析了AngularJS实现表单验证的相关指令、模型绑定、数据验证等操作技巧,需要的朋友可以参考下
2018-08-08
详解Angular动态组件
本文主要介绍了Angular动态组件，对此感兴趣的同学，可以亲自实验一下。
2021-05-05
Angular依赖注入optional constructor parameters概念
这篇文章主要为大家介绍了Angular 依赖注入领域里 optional constructor parameters 的概念及使用,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
2023-11-11
AngularJS中处理多个promise的方式
promise是一种用异步的方式处理值的方法，promise是对象，代表了一个函数最终可能的返回值或者抛出的异常，在与远程对象打交道时我们可以把他看作是远程对象的一个代理，通过本文给大家介绍AngularJS中处理多个promise的方式及什么是promise，需要的朋友参考下
2016-02-02
详解Angular中的自定义服务Service、Provider以及Factory
本篇文章主要介绍了详解Angular中的自定义服务Service、Provider以及Factory，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-04-04
详解基于angular-cli配置代理解决跨域请求问题
本篇文章主要介绍了详解基于angular-cli配置代理解决跨域请求问题，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-07-07
cnpm加速Angular项目创建的方法
这篇文章主要介绍了cnpm加速Angular项目创建的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-09-09