自适应flex滚动布局

比较方便灵活的方案

by john Chat

HTML

<body class="flex-wrap col-flex">
    <header class="midCenter flex-wrap row-flex">我是标题</header>

    <div class="page flex-wrap col-flex">
        <div class="scroll-wrap">
            <section class="midCenter flex-wrap" id="banner">
                <div>我是banner</div>
            </section>

            <section id="quirk" class="flex-wrap row-flex">
                <div></div>
                <div class="flex-wrap col-flex">
                    <div></div>
                    <div></div>
                </div>
            </section>

            <section id="four-col" class="flex-wrap row-flex">
                <div></div>
                <div></div>
                <div></div>
                <div></div>
            </section>

            <section id="two-col" class="flex-wrap row-flex">
                <div></div>
                <div></div>
            </section>

            <section id="three-col" class="flex-wrap row-flex">
                <div></div>
                <div></div>
                <div></div>
            </section>
        </div>
    </div>


    <footer class="flex-wrap row-flex">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </footer>
</body>

CSS

html{
            height:100%;
        }

        body{
            background: #fff;
            margin:0;
            padding:0;
            width: 100%;
            height: 100%;
        }

        /** 水平伸缩容器**/
        .row-flex{
            -moz-box-orient: horizontal;
            -webkit-box-orient: horizontal;
            -moz-box-direction: normal;
            -webkit-box-direction: normal;
            -moz-box-lines: multiple;
            -webkit-box-lines: multiple;
            -ms-flex-flow: row wrap;
            -webkit-flex-flow: row wrap;
            flex-flow: row wrap;
        }

        /** 垂直伸缩容器**/
        .col-flex{
            -moz-box-orient: vertical;
            -webkit-box-orient: vertical;
            -moz-box-direction: normal;

            -moz-box-lines: multiple;
            -webkit-box-lines: multiple;
            -webkit-flex-flow: column wrap;
            -ms-flex-flow: column wrap;
            flex-flow: column wrap;
        }

        /** 伸缩容器**/
        .flex-wrap{
            /** 各种版本兼容**/
            display: -webkit-box;
            display: -moz-box;
            display: -ms-flexbox;
            display: -webkit-flex;
            display: flex;
        }

        /** 垂直居中**/
        .midCenter{
            /** 垂直居中核心**/
            -moz-box-pack: center;
            -webkit-box-pack: center;
            box-pack:center;
            -moz-box-align: center;
            -webkit-box-align: center;
            box-align: center;
            box-pack:center;
            -ms-flex-pack:center;
            display: -ms-flexbox;
            -ms-flex-align:center;
            justify-content:center;
            align-items: center;
        }

        /** 占位器**/
        .page{
            -webkit-box-flex: 1;
            -moz-box-flex: 1;
            -ms-flex: 1;
            -webkit-flex: 1;
            flex: 1;
            overflow: hidden;
        }

        /** 真正滚动**/
        .scroll-wrap{
            position: relative;
          ...