flex多栏布局

在不同分辨率下显示不同的效果。
当屏幕宽度大于1000像素的时候，显示为三栏。
当屏幕宽度小于1000像素，大于768像素时，隐藏右侧边栏。
当屏幕宽度小于768像素，纵向排列三栏。

<!--页面主体-->
<div class="container">
    <!--导航菜单-->
    <nav>
        <a href="#">链接1</a>
        <a href="#">链接2</a>
        <a href="#">链接3</a>
    </nav>
    <!--页面主体内容-->
    <main>
        <div class="block1">block1</div>
        <div class="block2">block2</div>
    </main>
    <!--侧边栏-->
    <aside>
        <div class="side1">side1</div>
        <div class="side2">side2</div>
    </aside>
</div>
<!--页面底部-->
<footer>
    copyright C fhasfhajlkdjak
</footer>

<style type="text/css">
    html,
    body {
        width: 100%;
        height: 100%;
    }

    body {
        display: flex;
        flex-direction: column;
    }

    .container {
        flex: 1;
        display: flex;
        background: #d00;
    }

    nav,
    aside {
        width: 200px;
        background: pink;
    }

    main {
        flex: 1;
    }

    footer {
        height: 60px;
        background: #ccc;
    }

    @media only screen and (max-width:768px) {
        .container {
            flex-direction: column;
        }
        nav,
        aside {
            width: 100%;
        }
        aside {
            display: block;
        }
        main {
            width: 100%;
        }
    }

    @media only screen and (min-width: 768px) and (max-width: 1000px) {
        aside {
            display: none;
        }
    }
</style>