应用flex合理布局轻轻松松完成网页页面合●▂●

2021-03-24 10:36 jianzhan

空话很少说,立即上编码:

1、上中下合理布局:

<!DOCTYPE html>

    <html lang="en">
    <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Document</title>
     <style>
     body {
     position: absolute;
     left: 0; right: 0; top: 0; bottom: 0;
     padding: 0; margin: 0;
     display: flex;
     flex-direction: column;
     }
     .header, .footer {
     height: 50px;
     }
     .body {
     flex-grow: 1;
     background-color: #DDD;
     }
     </style>
    </head>
    <body>
     <div class="header">Header</div>
     <div class="body">Content</div>
     <div class="footer">Footer</div>
    </body>
    </html>

显示信息实际效果以下:

2、上下合理布局:

    <!DOCTYPE html>
    <html lang="en">
    <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Document</title>
     <style>
     body {
     position: absolute;
     left: 0; right: 0; top: 0; bottom: 0;
     padding: 0; margin: 0;
     display: flex;
     }
     .left, .right {
     height: 100%;
     }
     .left {
     width: 250px;
     background-color: rgba(255,0,0,0.3);
     }
     .right {
     display: flex;
     flex-direction: column;
     }
     .header, .footer {
     height: 50px;
     }
     .right, .content {
     flex-grow: 1;
     }
     .content {
     background-color: #DDD;
     }
     </style>
    </head>
    <body>
     <div class="left">LeftNav</div>
     <div class="right">
     <div class="header">Header</div>
     <div class="content">Content</div>
     <div class="footer">Footer</div>
     </div>
    </body>
    </html>

网页页面的实际效果以下:

下边对好多个重要的款式多方面表明,那样便可以设计方案担任何要想的合理布局了:

flex-grow: 1; // 表明器皿在主轴的总宽有过剩时该子项目占有剩下室内空间
position:absolute; left: 0;right: 0; top: 0; bottom: 0; // 这一组款式让该原素占满精准定位的父级原素

到此这篇有关应用flex合理布局轻轻松松完成网页页面合理布局的实例编码的文章内容就详细介绍到这了,大量有关flex网页页面合理布局內容请检索脚本制作之家之前的文章内容或再次访问下边的有关文章内容,期待大伙儿之后多多的适用脚本制作之家!