自适应flex滚动布局

比较方便灵活的方案

HTML

<body class="flex-wrap col-flex">

            <section id="quirk" class="flex-wrap row-flex">
                <div>222222222222</div>
                <div class="flex-wrap col-flex">
                    <div>1111</div>
                    <div>222</div>
                  <div class=box"">
                    <div>333</div>
                    <div>444</div>
                   </div>
                </div>
            </section>
</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{
            flex-flow: column wrap;
        }

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




        section{
            margin:3px 5px;
        }

        /** 真正设置高度 **/
        #banner{
            border:2px solid #999;
            margin:1px;
            height:100px;
        }
        #quirk,#four-col{
            height:150px;
        }
        #three-col,#two-col{
            height:100px;
        }


        /** 内部组件**/

        #quirk>div{
            margin:0 8px;
        }

        #quirk>div:nth-child(1){
            background: #b9e2ee;
            flex: 200;
        }

        #quirk>div:nth-child(2){
            flex: 175;

        }
        #quirk>div:nth-child(2)>div:nth-child(1){
            background: #b9e2ee;
            flex: 80;
            margin-bottom: 4px;
        }
        #quirk>div:nth-child(2)>div:nth-child(2){
            background: #b9e2ee;
            flex: 80;
        }
         #quirk>div:nth-child(3)>div:nth-child(1){
            background: #ddd;
            flex: 80;
        }
         #quirk>div:nth-child(3)>div:nth-child(2){
            background: red;
            flex: 80;
        }
       ...