css 弹性盒子

display flex实战

圣杯布局:

    <div class="container">
        <header>
            this is a header
        </header>
        <div class="body">
            <main class="content">content</main>
            <nav class="my-nav">nav</nav>
            <aside class="ads">ads</aside>
        </div>
        <footer>
            this is a footer
        </footer>
    </div>

        * {
            padding: 0;
            margin: 0;
        }

        html,
        body {
            height: 100%;
            width: 100%;
            font-size: 14px;
        }

        .container {
            min-height: 100vh;
            width: 80%;
            margin: auto;
            display: flex;
            flex-direction: column;
        }

        header,
        footer {
            flex: 0.1;
            background-color: antiquewhite;
        }

        .body {
            display: flex;
            flex: 1;
        }

        .content {
            flex: 1;
            background-color: bisque;
        }

        .my-nav,
        .ads {
            flex: 0 0 20em;
            background-color: coral;
        }

        .my-nav {
            /* 导航栏放在最左边 */
            order: -1;
        }

        @media(max-width: 765px){
            .body{
                flex-direction: column;
                flex: 1;
            }
            .my-nav,
            .ads,
            .content {
                flex: auto;
            }
        }