ms flexbox 布局 (ko list)

<!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>

 

你可能感兴趣的:(Flex)