<!DOCTYPE html>

<html>

<head>

    <title></title>

    <script src="js/jq.js"></script>

    <script src="js/ko.js"></script>

    <script src="resources/lib/core.js"></script>

    <script src="resources/lib/nav.js"></script>

    <style>

        .container {

            display: -ms-flexbox;

            -ms-flex-direction: row;

            /* align 设置的方向与 -ms-flex-direction 相同, pack设置的方向与-ms-flex-direction垂直

            align:  begin center end

            pack: begin center end justify(第一个元素贴近父元素开始，最有一个元素贴近元素末尾，     其余在中间自适应

                       */

            -ms-flex-align: center;

            -ms-flex-pack: center;

            height: 800px;

            width: 800px;

            /* 设置子元素自动换行*/

            -ms-flex-wrap: wrap;

            border: 1px solid red;

        }

        .item {

            width: 200px;

            height: 200px;

            line-height: 200px;

            text-align: center;;

            border: 1px solid deepskyblue;

        }

        @keyframes fadeOut {

            0% {

                opacity: 1;

            }

            50% {

                opacity: 0.5;

                transform: scale(0.95);

            }

            100% {

                opacity: 1;

            }

        }

        .item:nth-child(odd) {

            background: deepskyblue;

        }

        .item:nth-child(even) {

            background: greenyellow;

            transform: scale(0.8);

        }

        .item:hover {

            animation: fadeOut 1s;

        }

    </style>

</head>

<body>

<div class='container' data-bind='foreach:people'>

    <div class='item' data-bind='text:item'>

    </div>

</div>

<script>

    $(function () {

        // window['vm'] = {};

        /*var nav = new G.nav('resources/data/nav.json');

         nav.getViewModel(function (viewModel) {

         vm = viewModel;

         ko.applyBindings(vm);

         })

         */

        var items = function (item) {

            this.item = item;

        }

        var vm = {

            people: [

                new items('1'),

                new items('2'),

                new items('3'),

                new items('4'),

                new items('5'),

                new items('6')

            ]

        }

        ko.applyBindings(vm);

    })

</script>

</body>

</html>

ms flexbox 布局 (ko list)的更多相关文章

  1. CSS3弹性盒模型flexbox布局基础版

    原文链接:http://caibaojian.com/using-flexbox.html 最近看了社区上的一些关于flexbox的很多文章,感觉都没有我这篇文章实在,最重要的兼容性问题好多人都没有提 ...

  2. 3、手把手教React Native实战之flexbox布局

    flexbox是Flexible Box的缩写,弹性盒子布局  主流的浏览器都支持 flexbox布局是伸缩容器(container)和伸缩项目(item)组成 Flexbox布局的主体思想是元素可以 ...

  3. flexbox布局神器

    前言 2009年,W3C提出了一种新的方案----Flexbox布局(弹性布局),可以简便.完整.响应式地实现各种页面布局.Flex布局模型不同于块和内联模型布局,块和内联模型的布局计算依赖于块和内联 ...

  4. 【前端攻略】最全面的水平垂直居中方案与flexbox布局

    最近又遇到许多垂直居中的问题,这是Css布局当中十分常见的一个问题,诸如定长定宽或不定长宽的各类容器的垂直居中,其实都有很多种解决方案.而且在Css3的flexbox出现之后,解决各类居中问题变得更加 ...

  5. Flexbox布局（转）

    Flexbox布局( Flexible Box 或CSS3 弹性布局),是CSS3中的一种新的布局模式,是可以自动调整子元素的高和宽,来很好的填充任何不同屏幕大小的显示设备中的可用显示空间,收缩内容防 ...

  6. 互动教程，让你5分钟掌握 Flexbox 布局模式

    Flexbox 布局模块目前是 W3C 候选标准,旨在提供一个更有效的方式进行布局,对齐和为容器里的项目分配空间,即使它们的大小是未知的或者动态的.这里分享一个基于 Knockout.js 构建的互动 ...

  7. React Native 开发之 (05) flexbox布局

    一  flexbox布局 1 flex布局 flexbox是ReactNative 应用开发中必不可少的内容,也是最常用的内容. 传统的页面布局是基于盒子模型,依赖定位属性,流动属性和显示属性来解决. ...

  8. flexbox布局的兼容性

    http://ayqy.net/blog/flexbox布局的兼容性/ 写在前面 flex布局早在2009年就有了,而现在是2015年6月8日,使用最新的flex语法会发现支持程度并不好,即使是在“高 ...

  9. CSS3之Flexbox布局

    CSS3为我们提供了一种可伸缩的灵活的web页面布局方式-flexbox布局,它具有很强大的功能,可以很轻松实现很多复杂布局,在它出现之前,我们经常使用的布局方式是浮动或者固定宽度+百分比来进行布局, ...

随机推荐

  1. OC中字典：NSDictionary类是如何使用的

    字典就是关键字及其定义(描述)的集合.Cocoa中的实现字典的集合NSDictionary在给定的关键字(通常是一个NSString)下存储一个数值(可以是任何类型的对象).然后你就可以用这个关键字来 ...

  2. mysql：错误日志log_error:

    1.启动错误日志: 在不同的情况下,错误日志会记录在不同的位置,如果没有配置文件指定文件名,则默认为hostname.err 在mysql5.6的RPM发布的方式中,错误日志被放在/var/log/m ...

  3. nfs文件系统挂载失败解决方法

    nfs文件系统挂载失败解决方法 */--> nfs文件系统挂载失败解决方法 Table of Contents 1. 错误提示 2. 我的配置 1 错误提示 bootserver=255.255 ...

  4. void指针、NULL指针和未初始化指针

    一个指针可以被声明为void类型,比如void *x.一个指针可以被赋值为NULL.一个指针变量声明之后但没有被赋值,叫做未初始化指针. 1 2 3 4 5 6 7 8 9 10 11 12 13 1 ...

  5. jquery mobile 移动web

    轻量级框架jQuery Mobile 所需文件 <link rel="stylesheet" href="jquery.mobile-1.1.2/jquery.mo ...

  6. HTML5 服务器发送事件

    单向传输:服务器端——>客户端   作用:传回的能每过3s重新刷新一遍.从而能过跟数据库同步,与ajax配合使用   一.客户端写法 必须的用 message 方法   JSON.parse() ...

  7. scala学习笔记：match表达式

    写了一个超级长的表达式,估计不是最简洁的: scala> def foo(ch:Any)=ch match { case true=>"male";case false ...

  8. 支持状态对象复用的RPC框架——SnakeRPC

    SnakeRPC是我2年前(春节期间!)做的一个RPC框架,现与大家分享. 设计SnakeRPC的主要动机是,Hessian返回的状态对象(如:数据库连接对象.文件对象等)无法复用,而且它对Strea ...

  9. 【转】ODBC和OLEDB的连接字符串

    ODBC连接 适合数据库类型 连接方式access  "Driver={microsoft access driver(*.mdb)};dbq=*.mdb;uid=admin;pwd=pas ...

  10. C#集合之Hashtable

    Hashtable是一个键值对集合,其泛型版本是Dictionary<K, V>,下面说下常用的一些方法; 1.Add(),向Hashtable添加元素,需要注意的是因为它是键值对集合,所 ...