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 的...

弹性盒子flex布局实现骰子六个面并让骰子3D空间旋转

Flex布局实现骰子 *{ padding:0; margin:0; } body{ background...

使用flex box(弹性盒子模型)进行页面布局的注意事项

什么时候下使用flex比较方便?flexbox最主要的作用在于我们可以通过这个属性快速设置和操作它的子元素的布局,可以方便地实现居中、居左、居右、两边对齐、垂直居中、水平居中的效果; 一般如果遇到这...

CSS3草案的更新:弹性盒子布局和CSS3字体模块

          W3C CSS工作组刚发布了CSS3两个工作草案规范的更新。     第一个更新在3月11日发布,对CSS3弹性盒子布局模块进行了大的变更。第二个在3月24日发布,为CSS3字体模...
  • hfahe
  • hfahe
  • 2011年04月17日 22:17
  • 4187

display :flex 弹性盒子布局要点

弹性盒子布局有好几个用法1.页面布局用到 aaa bbb ccc 当容器内部元素需要自适应宽,按父级百分比来布局的时候就可以用 flex布局。 与普通 左...

CSS弹性盒子Flexbox布局详解

版权声明:本文为小平果原创文章 , 转载请注明:http://blog.csdn.net/i10630226 布局的传统解决方案,基于盒状模型,依赖 display属性 + position...

AppCan_3 传统的流式布局 与 弹性盒子

在传统的流式布局,由内容决定容器布局的大小, 弹性盒子恰好相反,它是由父容器分配大小,再由父容器给子容器分配大小, 看一个示例 在AppCan, phone目录下,增加一个html页面:  ...
  • aduovip
  • aduovip
  • 2016年05月29日 23:16
  • 890

iOS 自动布局和弹性盒子

当同事问到我这个问题时,我脑子中直接冒出了一个词“弹性盒子”。 问题: 有一个 Cell 中有 4 个并排排列的控件,布局如下图所示:假设: 1、        这些控件高度和y坐标固定。2、    ...
  • kmyhy
  • kmyhy
  • 2015年12月11日 09:34
  • 2606

网页布局之》》》》弹性盒子》》》

网页弹性盒子》》》》box-flex 属性  按比例占据父元素的尺寸。 定义两个可伸缩的 p 元素。如果父元素的总宽度是 300 像素,则 #p1 的宽度是 100 像素,而 #p2 的宽度是 2...

第三章:reactNative开发中弹性盒子布局

在css3中提供了一个弹性盒子布局适合手机端开发,在reactNative官方也推荐使用的布局方式,至于概念就不去介绍,就介绍几个常用的属性。更多信息请查阅阮一峰 一、区分容器属性与项目属性 简单...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:AngularJS 实现弹性盒子布局
举报原因:
原因补充:

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