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 相关文章推荐
js+css 实现遮罩居中弹出层(随浏览器窗口滚动条滚动)
Dec 11 Javascript
js实现文字跟随鼠标移动而移动的方法
Feb 28 Javascript
JavaScript动态添加列的方法
Mar 25 Javascript
Bootstrap布局之栅格系统详解
Jun 13 Javascript
jQuery Validate表单验证插件的基本使用方法及功能拓展
Jan 04 Javascript
微信小程序动态添加分享数据
Jun 14 Javascript
vue单页面打包文件大?首次加载慢?nginx带你飞,从7.5M到1.3M蜕变过程(推荐)
Jan 16 Javascript
Vue2.0实现调用摄像头进行拍照功能 exif.js实现图片上传功能
Apr 28 Javascript
聊聊鉴权那些事(推荐)
Aug 22 Javascript
微信小程序绑定手机号获取验证码功能
Oct 22 Javascript
vue.js路由mode配置之去掉url上默认的#方法
Nov 01 Javascript
何时/使用 Vue3 render 函数的教程详解
Jul 25 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
PHP 多维数组排序实现代码
2009/08/05 PHP
php中批量删除Mysql中相同前缀的数据表的代码
2011/07/01 PHP
php中get_headers函数的作用及用法的详细介绍
2013/04/27 PHP
PHP 实现浏览记录并按日期分组
2017/05/11 PHP
使用Laravel中的查询构造器实现增删改查功能
2019/09/03 PHP
javascript函数库-集合框架
2007/04/27 Javascript
js window.event对象详尽解析
2009/02/17 Javascript
面向对象继承实例(a如何继承b问题)(自写)
2013/07/01 Javascript
Jquery自定义button按钮的几种方法
2014/06/11 Javascript
Bootstrap基本模板的使用和理解1
2016/12/14 Javascript
socket.io实现在线群聊功能
2017/04/07 Javascript
详解nodejs操作mongodb数据库封装DB类
2017/04/10 NodeJs
jQuery动态添加元素无法触发绑定事件的解决方法分析
2018/01/02 jQuery
浅谈vue项目可以从哪些方面进行优化
2018/05/05 Javascript
使用weixin-java-tools完成微信授权登录、微信支付的示例
2018/09/26 Javascript
详解使用Nuxt.js快速搭建服务端渲染(SSR)应用
2019/03/13 Javascript
Nodejs libuv运行原理详解
2019/08/21 NodeJs
vue组件命名和props命名代码详解
2019/09/01 Javascript
webpack常用构建优化策略小结
2019/11/21 Javascript
JavaScript实现手机号码 3-4-4格式并控制新增和删除时光标的位置
2020/06/02 Javascript
Python高效编程技巧
2013/01/07 Python
使用Python编写一个最基础的代码解释器的要点解析
2016/07/12 Python
解决Python字典写入文件出行首行有空格的问题
2017/09/27 Python
Python中实现单例模式的n种方式和原理
2018/11/14 Python
Pandas之DataFrame对象的列和索引之间的转化
2019/06/25 Python
python笔记_将循环内容在一行输出的方法
2019/08/08 Python
django项目用higcharts统计最近七天文章点击量
2019/08/17 Python
Pytorch修改ResNet模型全连接层进行直接训练实例
2019/09/10 Python
Python queue队列原理与应用案例分析
2019/09/27 Python
python图形界面开发之wxPython树控件使用方法详解
2020/02/24 Python
python实现视频压缩功能
2020/12/18 Python
德国大型的家具商店:Pharao24.de
2016/10/02 全球购物
美国瑜伽品牌:Gaiam
2017/10/31 全球购物
来自美国主售篮球鞋的零售商店:KICKSUSA
2017/11/28 全球购物
创业计划书如何吸引他人眼球
2014/01/10 职场文书
社区志愿者活动总结
2014/06/26 职场文书