flex布局

利用flex写一个自适应布局,代码来自MDN文档

HTML结构

    <header></header>
    <div class="main">
        <article>我是article</article>
        <nav>我是nav</nav>
        <aside>我是aside</aside>
    </div>
    <footer>我是footer</footer>

CSS

<style>
    body{
    font-size: 24px;
    background: #999999;
    }
    #main{
        min-height: 800px;
        margin: 0;
        padding: 0;
        display: flex;
        flex-flow: row;
    }
    
    #main > article{
        margin: 2px;
        padding: 10px;
        border: 1px solid black;
        border-radius: 10px;
        flex: 3 1 60%
        order: 2
    }
    #main > nav{
        margin: 2px;
        padding: 10px;
        border: 1px solid black;
        border-radius: 10px;
        flex: 1 6 20%
        order: 1
    }
    #main > aside{
        margin: 2px;
        padding: 10px;
        border: 1px solid yellow;
        border-radius: 10px;
        flex: 1 6 20%
        order: 3
    }
    header, footer{
        display: block;
        margin: 4px;
        padding: 5px;
        min-height: 100px;
        border: 1px solid #eebb55;
        border-radius: 7pt;
        background: #ffeebb;
    }
    @media all and(max-width: 640px) {
        #main, #page {
            -webkit-flex-flow: column;
            flex-direction: column;
        }

        #main > article, #main > nav, #main > aside {
            /* 恢复到文档内的自然顺序 */
            -webkit-order: 0;
            order: 0;
        }

        #main > nav, #main > aside, header, footer {
            min-height: 50px;
            max-height: 50px;
        }
    }
<style>