使用flex实现页面布局

页面：

<div class="container">
        <div class="section">
          <!--头部-->
          <div class="header">
            <h2>
                header
            </h2>
          </div>
          <!--头部结束-->
          <!--中间部分-->
          <div class="content">
              <!--中间部分的左侧部分-->
              <div class="content_left">
                左侧导航
              </div>
              <!--中间部分的左侧部分结束-->
              <!--中间部分的右侧部分-->
              <div class="content_right">
                  右侧内容显示区域
              </div>
              <!--中间部分的右侧部分结束-->
          </div>
          <!--中间部分结束-->
          <!--尾部-->
          <footer class="footer">
            <h2>
                footer
            </h2>
          </footer>
          <!--尾部结束-->
        </div>
    </div>

页面样式：

           html, body{
             height: 100%;
             margin: 0;
             padding: 0;
           }
           .container{
              width: 100%;
              height: 100%;
           }
           .section{
             height: 100%;
             display: flex;
             flex-direction: column;
           }
           .content{
                width: 100%;
                flex: 1;
                flex-direction: row;
                display: flex;
                background-color: rgb(2,138,201);
           }
           .content_left{
                display: flex;
                background-color: antiquewhite;
                width: 200px;
                height: 100%;
            }
           .content_right{
                display: flex;
                width: 300px;
                background-color: cadetblue;
                height: 100%;
                flex:1;
            }
           .header, .footer{
             background-color: rgb(72,82,94);
           }
           .header{
             height: 90px;
           }
           .footer{
             height: 80px;
           }