一个典型的flex布局，兼容性比较好

Posted 飞翔梦想

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了一个典型的flex布局，兼容性比较好相关的知识，希望对你有一定的参考价值。

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;
            width: 100%;
            height: 100%;
            overflow: scroll;
            -webkit-box-flex: 1;
            -moz-box-flex: 1;
            -webkit-flex: 1;
            -ms-flex: 1;
            flex: 1;
        }

        /** 头和尾巴**/
        header,footer{
            background:#f7f7f7;
            height:44px;
        }

        footer>div{
            -webkit-box-flex: 1;
            -moz-box-flex: 1;
            -ms-flex: 1;
            -webkit-flex: 1;
            flex: 1;
            border:1px solid #666;
            margin:4px;
        }



        section{
            margin:3px 5px;
        }

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


        /** 内部组件**/
        #four-col>div,#three-col>div,#two-col>div{
            -webkit-box-flex: 1;
            -moz-box-flex: 1;
            -ms-flex: 1;
            -webkit-flex: 1;
            flex: 1;
        }
        #four-col>div{
            background: #aaebbe;
            margin:0 2px;
        }
        #three-col>div{
            background: #8f82bc;
            margin:0 2px;
        }
        #two-col>div{
            background: #f7baba;
            margin:0 2px;
        }

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

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

        #quirk>div:nth-child(2){
            -webkit-box-flex: 175;
            -moz-box-flex: 175;
            -ms-flex: 175;
            -webkit-flex: 175;
            flex: 175;

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

            -webkit-box-flex: 60;
            -moz-box-flex: 60;
            -ms-flex: 60;
            -webkit-flex: 60;
            flex: 60;
            margin-bottom: 4px;
        }
        #quirk>div:nth-child(2)>div:nth-child(2){
            background: #b9e2ee;

            -webkit-box-flex: 30;
            -moz-box-flex: 30;
            -ms-flex: 30;
            -webkit-flex: 30;
            flex: 30;
        }

　　

以上是关于一个典型的flex布局，兼容性比较好的主要内容，如果未能解决你的问题，请参考以下文章

Flex布局详解

display:flex;多行多列布局学习

彻底搞懂flex弹性盒模型布局

0077 flex布局：flex-directionjustify-contentflex-wrapalign-contentalign-itemsflex-flowalign-self

grid布局

03 flex布局