Feng Wei 🔬
 
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <title>页面自适用</title>
    <style type="text/css">
        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

        html {
            font-size: 62.5%;
            font-family: "Arial Microsoft Sans Serif ";
        }

        body {
            font-size: 1.4rem;
            width: 100%;
            height: 100%;
        }

        .box {
            display: flex;
            flex-direction: row;
            justify-content: flex-start;
            border: 1px solid blue;
        }

        .left-nav {
            flex: 0 0 auto;
            height: 100%;
            border: 1px solid red;
        }
        .left-nav:hover{
            flex: 0 0 500px;
        }

        .content {
            flex: 1 1 auto;
            height: 100%;
            border: 1px solid #ccc;
        }

        

        .right-nav {
            flex: 0 0 300px;
            height: 100%;
            border: 1px solid gray;
        }

        .box-bfc {
            width: 100vw;
            border: 1px solid green;
        }
        .box-bfc nav{
            float: left;
            width: 150px;
            border-right: 1px solid red;
        }
        .box-bfc article {
            display: inline-block;
        }
        .box-bfc section{
            float: right;
            width: 150px;
            border-left: 1px solid red;
        }
    </style>
</head>

<body>
<p>布局的两种方式:</p>
<p>Flex</p>
<div class="box">
    <nav class="left-nav">
        <div>左侧可伸缩 使用flex: 0 0 auto 实现根据其内容固定宽度</div>
        <section></section>
    </nav>
    <section class="content">
        <div>内容区 使用flex: 1 1 auto 宽度占满剩余空间 auto的意思是分配剩余空间之前宽度根据自身内容而定
            <p>1、如果弹性缩小的值设置为0 同时默认宽度设置auto 那么当屏幕伸缩的时候 宽度不会缩小 只会是根据内容的最小宽度为基准， 这个常用在自动分配宽度上有用</p>
            <p>2、如果默认宽度设置0% 意思是分配剩余空间之前宽度为0 则宽度完全由增长flex-grow属性为准 这个常用在平均分配宽度场景中</p>
        </div>
    </section>
    <nav class="right-nav">
        右侧固定
    </nav>
</div>
<p style="text-decoration: line-through;">BFC+加浮动(用一个flex布局就搞定了 用什么乱其八糟的麻烦方法！！)</p>
<div class="box-bfc">
    <nav>
        <div>左侧固定</div>
    </nav>
    <article>
        内容区可伸缩
    </article>
    <section>右侧固定</section>
</div>

<script type="text/javascript">

</script>
</body>
</html>