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


Posted in Javascript onAugust 30, 2016

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

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

Javascript 相关文章推荐
40款非常棒的jQuery 插件和制作教程(系列一)
Oct 26 Javascript
深入理解javascript作用域和闭包
Sep 23 Javascript
浅谈angularJS 作用域
Jul 05 Javascript
快速学习AngularJs HTTP响应拦截器
Dec 31 Javascript
AngularJS基础 ng-include 指令简单示例
Aug 01 Javascript
jQuery选择器实例应用
Jan 05 Javascript
Angular 4.x中表单Reactive Forms详解
Apr 25 Javascript
vue项目设置scrollTop不起作用(总结)
Dec 21 Javascript
vue基础之使用get、post、jsonp实现交互功能示例
Mar 12 Javascript
浅谈如何优雅处理JavaScript异步错误
Nov 12 Javascript
js实现课堂随机点名系统
Nov 21 Javascript
原理深度解析Vue的响应式更新比React快
Apr 04 Javascript
浅谈javascript中的Function和Arguments
Aug 30 #Javascript
javascript 中的console.log和弹出窗口alert
Aug 30 #Javascript
Laravel中常见的错误与解决方法小结
Aug 30 #Javascript
js中常用的Tab切换效果(推荐)
Aug 30 #Javascript
基于cssSlidy.js插件实现响应式手机图片轮播效果
Aug 30 #Javascript
JavaScript探测CSS动画是否已经完成的方法
Aug 30 #Javascript
基于JavaScript实现鼠标箭头移动图片跟着移动
Aug 30 #Javascript
You might like
短波的认识
2021/03/01 无线电
PHP分页函数代码(简单实用型)
2010/12/02 PHP
深入PHP FTP类的详解
2013/06/13 PHP
PHP_Cooikes不同页面无法传递的解决方法
2014/03/07 PHP
php删除指定目录的方法
2015/04/03 PHP
PHP 双链表(SplDoublyLinkedList)简介和使用实例
2015/05/12 PHP
PHP高精确度运算BC函数库实例详解
2017/08/15 PHP
JavaScript 动态创建VML的方法
2009/10/14 Javascript
JQUERY获取form表单值的代码
2010/07/17 Javascript
Javascript中的for in循环和hasOwnProperty结合使用
2013/06/05 Javascript
JavaScript动态创建div属性和样式示例代码
2013/10/09 Javascript
JS 删除字符串最后一个字符的实现代码
2014/02/20 Javascript
javascript面向对象之定义成员方法实例分析
2015/01/13 Javascript
浏览器中url存储的JavaScript实现
2015/07/07 Javascript
js阻止移动端页面滚动的两种方法
2017/01/25 Javascript
Nodejs基于LRU算法实现的缓存处理操作示例
2017/03/17 NodeJs
vue学习笔记之指令v-text &amp;&amp; v-html &amp;&amp; v-bind详解
2017/05/12 Javascript
详解vue-cli之webpack3构建全面提速优化
2017/12/25 Javascript
JQuery中的常用事件、对象属性与使用方法分析
2019/12/23 jQuery
JS实现星星海特效
2019/12/24 Javascript
VUE实时监听元素距离顶部高度的操作
2020/07/29 Javascript
Vue中使用JsonView来展示Json树的实例代码
2020/11/16 Javascript
Sublime开发python程序的示例代码
2018/01/24 Python
Python双链表原理与实现方法详解
2020/02/22 Python
Python基础之列表常见操作经典实例详解
2020/02/26 Python
Python -m参数原理及使用方法解析
2020/08/21 Python
HTML5如何为形状图上颜色怎么绘制具有颜色和透明度的矩形
2014/06/23 HTML / CSS
美国知名玩具品牌:Melissa & Doug
2016/08/16 全球购物
L’Artisan Parfumeur官网:法国香水品牌
2020/08/11 全球购物
init进程的作用
2015/08/20 面试题
卫校中专生个人自我评价
2013/09/19 职场文书
护理学毕业生求职信
2013/11/14 职场文书
应届毕业生简历自我评价
2014/01/31 职场文书
无私奉献演讲稿
2014/09/04 职场文书
监考失职检讨书
2015/01/26 职场文书
vue基于Teleport实现Modal组件
2021/05/31 Vue.js