box-flex 弹性合布局+WebApp布局自适应

问：随着屏幕改变，中间自适应  两边固定宽度？

参考:

nec 布局

四种方法--博客园

问：左侧导航栏隐藏后，右侧内容宽度自动（响应式）变大？

<!DOCTYPE html>
<html>
    <head>
        <style>
        *{
            margin: 0 ;padding: 0;
        }
            div {
                display: -moz-box;
                display: -webkit-box;
                display: box;
                 100%;                       
            }            
            #p1 {
                -moz-box-flex: 1.0; 
                -webkit-box-flex: 1.0;  
                background: red;
                height: 500px;      
            }           
            #p2 {
                -moz-box-flex: 8.0;     
                -webkit-box-flex: 8.0;      
                box-flex: 8.0;
                background: blue;
                height: 100px;
                margin: 0 20px;     
            }
        </style>
    </head>
    <body>
        <div>
            <p id="p1">Hello</p>
            <p id="p2">W3School</p>
        </div>
        <p><b>注释：</b>IE 不支持 box-flex 属性。</p>
    </body>
</html>

参考:

鑫生活--张鑫旭

51jb

w3school

flexbox兼容到IE8的跨浏览器解决方案

纯属个人观点,仅供参考！