关于flex布局的详细教程---及练习

关于flex布局的练习：全局分四个模块，头部、导航、内容以及底部。下面是关于练习的详细代码以及实现的效果图

    <div class="zt">
    <div class="header"></div>
    <div class="nav"></div>
    <div class="content">
        <!-- 左边框 -->
        <div class="l">
            <div class="l1"></div>
            <div class="l2"></div>
        </div>
        <!-- 中间框 -->
        <div class="m">
            <div class="s">
                <div class="s1"></div>
            </div>
            <div class="x">
                <div class="x1"></div>
            </div>
        </div>
        <!-- 右边框 -->
        <div class="r"></div>
    </div>
    <div class="footer"></div>
</div>

以下是css样式

   <style>
        .header{
            height: 30px;
            width: 700px;
            background-color: #199cfd;
            margin: 0 auto;
        }
        .nav{
            height: 90px;
            width: 700px;
            background-color:#0c3efb;
            margin: 0 auto;
            
        }
        .content{
            height: 400px;
            width: 700px;
            background-color:white;
            display: flex;
            justify-content: start;
            justify-content: end;
            margin: 0 auto;
            margin-top: 6px;
            align-items:stretch;
            margin-bottom: 6px;
            /* align-items: flex-start;
            align-items: flex-end; */ 
            /* align-items: center; */
            
        }
        .l{
            width: 24%;
            margin-right: 1%;
            background-color: #199cfd;
        }
        .m{
            width: 65%;
            background-color:#8185fd;
        }
        .r{
            width: 10%;
            background-color: #126afb;
            margin-left: 1%;
        }
        /* 左边框 */
        .l1{
            background-color: #189bcb;
            height: 57%;
            margin-bottom: 4.5%;
        }
        .l2{
            background-color:#5887cf ;
            height: 41%;
        }
        /* 中间框 */
        .s{
            height: 46%;
            margin-bottom: 2.5%;
            background-color: hsl(195, 98%, 62%);
            position: relative;
        }
        .s1{
            width: 50px;
            height: 50px;
            background-color: #0a24fb;
            position: absolute;
            /* text-align: center; */
            margin-top: 60px;
            
        }
        .x{
            height: 51%;
            background-color: #366afb;
        }
        .x1{
            height: 50px;
            width: 50px;
            background-color: #0a24fb;
            float:right;
            margin-top: 100px;
        }
        .footer{
            height: 60px;
            width: 700px;
            margin: 0 auto;
            background-color: #0e68c9;
        }
    </style>

最后的效果图：

相关链接：https://www.ruanyifeng.com/blog/2015/07/flex-grammar.html