AngularJS 实现弹性盒子布局

原创 2016年08月29日 14:26:58

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


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 入门系列-1 使用 AngularJs 搭建页面基本框架

每当看到前端程序员在脚本、样式、表单处理逻辑中苦苦挣扎的时候,我就在想,为什么不用Angular Js 呢? Angular Js 支持页面前端的 MVC 模式开发,在 Angular JS 的...
  • u013310119
  • u013310119
  • 2016年07月20日 10:07
  • 2290

angularJs弹性盒模型+bootstrap开发案例

angularJs结合微信的弹性盒模型+bootstrap开发前端并实现数据增加,删除功能。 ...
  • u012396955
  • u012396955
  • 2017年05月31日 15:04
  • 364

Angular Material学习笔记

Angular Material学习笔记一、安装 npm install
  • sinat_29729453
  • sinat_29729453
  • 2017年03月08日 13:32
  • 3332

angularjs 控件

AngularJS常用插件与指令收集 图片视频类 angular-maxonry 图片墙效果插件,可以将图片组织成类似于瀑布流的效果,依赖于jQuery、imageload...
  • qq_30979185
  • qq_30979185
  • 2017年05月23日 21:16
  • 696

AngularJS 中文资料+工具+库+Demo 大搜集

中文学习资料: 中文资料且成系统的就这么多,优酷上有个中文视频。 http://www.cnblogs.com/lcllao/archive/2012/10/18/2728787.html...
  • binyao02123202
  • binyao02123202
  • 2013年07月09日 11:27
  • 18268

CSS3 弹性盒布局模型和布局原理

在CSS 3中,CSS Flexible Box模块为一个非常重要的模块,该模块用于以非常灵活的方式实现页面布局处理。        虽然可以使用其他CSS样式属性来实现页面布局处理,但是如果使用C...
  • u010297791
  • u010297791
  • 2017年02月09日 14:00
  • 1449

Flex 弹性盒子布局使用教程

传统的网页布局(layout)解决方案,是基于盒模型,依赖display+float+position属性,这对于那些特殊的布局非常的不方便,比如垂直居中就不易于实现。 2009年,W3C提出了一种新...
  • lyznice
  • lyznice
  • 2017年01月02日 18:27
  • 2532

AngularJS模块详解

在angular中,模块可以是一个对象、一个方法或一个数组(数组的最后一个元素必须是方法)。后面要讲的模块属性和方法,都是针对通过angular.module()方法定义的模块而言的,我称之为angu...
  • woxueliuyun
  • woxueliuyun
  • 2016年03月23日 13:54
  • 7868

angularjs指令

angularjs为了减少dom对象的操作,故而它通过指令对常见的文本框,文本域,下拉框都做了规定,以方便angularjs的规范。 一、控件指令 1.文本框 ng-model="" ...
  • mafan121
  • mafan121
  • 2015年09月30日 16:41
  • 1742

rem实现弹性布局

  • Abner_Yan
  • Abner_Yan
  • 2016年11月21日 04:30
  • 260
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:AngularJS 实现弹性盒子布局
举报原因:
原因补充:

(最多只允许输入30个字)