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的数组的扩展实例代码
Jul 09 Javascript
JQuery与iframe交互实现代码
Dec 24 Javascript
jquery 学习之二 属性 文本与值(text,val)
Nov 25 Javascript
jQuery+css3动画属性制作猎豹浏览器宽屏banner焦点图
Mar 16 Javascript
JS调用打印机功能简单示例
Nov 28 Javascript
jQuery实现模拟flash头像裁切上传功能示例
Dec 11 Javascript
jquery实现文字单行横移或翻转(上下、左右跳转)
Jan 08 Javascript
使用store来优化React组件的方法
Oct 23 Javascript
extract-text-webpack-plugin用法详解
Feb 14 Javascript
JavaScript禁止右击保存图片,禁止拖拽图片的实现代码
Apr 28 Javascript
Vue Element校验validate的实例
Sep 21 Javascript
vue响应式原理与双向数据的深入解析
Jun 04 Vue.js
浅谈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
Syphon 使用方法
2021/03/03 冲泡冲煮
微信公众平台DEMO(PHP)
2016/05/04 PHP
静态页面下用javascript操作ACCESS数据库(读增改删)的代码
2007/05/14 Javascript
javascript 闭包疑问
2010/12/30 Javascript
JavaScript的漂亮的代码片段
2013/06/05 Javascript
AngularJS中的DOM操作用法分析
2016/11/04 Javascript
AngularJs 利用百度地图API 定位当前位置 获取地址信息
2017/01/18 Javascript
解决npm管理员身份install时出现权限的问题
2018/03/16 Javascript
vue项目中使用Hbuilder打包app 设置沉浸式状态栏的方法
2018/10/22 Javascript
在vue项目中使用Jquery-contextmenu插件的步骤讲解
2019/01/27 jQuery
浅谈小程序 setData学问多
2019/02/20 Javascript
中级前端工程师必须要掌握的27个JavaScript 技巧(干货总结)
2019/09/23 Javascript
Vue作用域插槽实现方法及作用详解
2020/07/08 Javascript
vue-路由精讲 二级路由和三级路由的作用
2020/08/06 Javascript
浅谈Python 字符串格式化输出(format/printf)
2016/07/21 Python
python3操作mysql数据库的方法
2017/06/23 Python
Python中用字符串调用函数或方法示例代码
2017/08/04 Python
Python scikit-learn 做线性回归的示例代码
2017/11/01 Python
计算机二级python学习教程(1) 教大家如何学习python
2019/05/16 Python
Python使用pymysql模块操作mysql增删改查实例分析
2019/12/19 Python
python如何求数组连续最大和的示例代码
2020/02/04 Python
TensorFlow 输出checkpoint 中的变量名与变量值方式
2020/02/11 Python
python实现mean-shift聚类算法
2020/06/10 Python
html5调用app分享功能示例(WebViewJavascriptBridge)
2018/03/21 HTML / CSS
zooplus意大利:在线宠物商店
2019/08/07 全球购物
main 函数执行以前,还会执行什么代码
2013/04/17 面试题
大学生就业意向书范文
2014/04/01 职场文书
幼儿园亲子活动总结
2014/04/26 职场文书
公司自我介绍演讲稿
2014/08/21 职场文书
小学红领巾广播稿(3篇)
2014/09/13 职场文书
乡镇安全生产月活动总结
2015/05/08 职场文书
不同意离婚上诉状
2015/05/23 职场文书
图书馆义工感想
2015/08/07 职场文书
原生JS中应该禁止出现的写法
2021/05/05 Javascript
CSS3实现列表无限滚动/轮播效果
2021/06/23 HTML / CSS
关于MybatisPlus配置双数据库驱动连接数据库问题
2022/01/22 Java/Android