ms flexbox 佈局 (ko list)

時間 2019-11-12

標籤 flexbox 佈局 list 欄目 Flex 简体版

原文原文鏈接

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

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。