flex实现常见管理系统自适应布局排版

狼性书生
187 阅读5分钟

采用flex一步一步实现常见管理系统中的自适应布局排版

基本布局排版

常用布局为”头部-主体-底部” 在这里插入图片描述 简单来实现这个布局

  • 基本HTML骨架如下所示

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>布局</title>
</head>
<body>
<div class="container">
    <div class="head">头部</div>
    <div class="main">主体</div>
    <div class="footer">底部</div>
</div>
</body>
</html>

    效果如下： 在这里插入图片描述

  • 采用CSS，让头部、主体、底部填充整个网页，无论如何缩放都不会出现滚动条

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>布局</title>
    <style>
      /* 移除默认内边距和外边距 */
      * {
        padding: 0;
        margin: 0;
      }
      /* 定义容器，将元素的高度设置为视口高度的100%。这里的 vh 是视口高度单位（Viewport Height），表示视口高度的百分比。
具体来说，100vh 表示元素的高度等于视口高度的 100%，即元素的高度将与浏览器窗口的高度相同 */
      .container {
        height: 100vh;
        width: 100%;
        background-color: aqua;
        /* flex布局设置为纵向排列 */
        display: flex;
        flex-direction: column;
      }
      .container .head {
        /* 给定默认高度100px */
        height: 100px;
        background-color: green;
      }
      .container .main {
        background-color: rgb(255, 102, 0);
         /* flex: 1; 用于在 Flexbox 布局中定义一个元素的弹性比例。具体来说，它告诉浏览器应该如何在可用空间中进行伸缩,在此处就是填充剩余空间 */
        flex: 1;
      }
      .container .footer {
        /* 给定默认高度100px */
        height: 100px;
        background-color: rgb(137, 206, 97);
      }
    </style>
</head>
<body>
<div class="container">
    <div class="head">头部</div>
    <div class="main">主体</div>
    <div class="footer">底部</div>
</div>
</body>
</html>

    效果如下： 在这里插入图片描述

主体内容自适应

一般头部和底部都是固定的，当主体内容过多时则会把底部和头部挤到变形，直到内容超出视觉窗口时会形成一个滚动条

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>布局</title>
    <style>
      * {
        padding: 0;
        margin: 0;
      }
      .container {
        height: 100vh;
        width: 100%;
        background-color: aqua;
        display: flex;
        flex-direction: column;
      }
      .container .head {
        height: 100px;
        background-color: green;
      }
      .container .main {
        background-color: rgb(255, 102, 0);
        flex: 1;
      }
      .container .footer {
        height: 100px;
        background-color: rgb(137, 206, 97);
      }
    </style>
</head>
<body>
<div class="container">
    <div class="head">头部</div>
    <div class="main">
    <div class="body">
        <div>主体内容</div>
        <div>主体内容</div>
        <div>主体内容</div>
        <div>主体内容</div>
        <div>主体内容</div>
        <div>主体内容</div>
        <div>主体内容</div>
        <div>主体内容</div>
        <div>主体内容</div>
        <div>主体内容</div>
        <div>主体内容</div>
        <div>主体内容</div>
        <div>主体内容</div>
        <div>主体内容</div>
        <div>主体内容</div>
        <div>主体内容</div>
        <div>主体内容</div>
        <div>主体内容</div>
        <div>主体内容</div>
        <div>主体内容</div>
        <div>主体内容</div>
        <div>主体内容</div>
        <div>主体内容</div>
        <div>主体内容</div>
        <div>主体内容</div>
        <div>主体内容</div>
        <div>主体内容</div>
        <div>主体内容</div>
        <div>主体内容</div>
        <div>主体内容</div>
        <div>主体内容</div>
        <div>主体内容</div>
        <div>主体内容</div>
        <div>主体内容</div>
        <div>主体内容</div>
        <div>主体内容</div>
        <div>主体内容</div>
        <div>主体内容</div>
        <div>主体内容</div>
        <div>主体内容</div>
        <div>主体内容</div>
        <div>主体内容</div>
        <div>主体内容</div>
        <div>主体内容</div>
        <div>主体内容</div>
        <div>主体内容</div>
        <div>主体内容</div>
        <div>主体内容</div>
        <div>主体内容</div>
        <div>主体内容</div>
        <div>主体内容</div>
        <div>主体内容</div>
        <div>主体内容</div>
        <div>主体内容</div>
        <div>主体内容</div>
        <div>主体内容</div>
        <div>主体内容</div>
        <div>主体内容</div>
        <div>主体内容</div>
        <div>主体内容</div>
        <div>主体内容</div>
        <div>主体内容</div>
        <div>主体内容</div>
        <div>主体内容</div>
        <div>主体内容</div>
        <div>主体内容</div>
        <div>主体内容</div>
        <div>主体内容</div>
        <div>主体内容</div>
        <div>主体内容</div>
        <div>主体内容</div>
        <div>主体内容</div>
        <div>主体内容</div>
        <div>主体内容</div>
        <div>主体内容</div>
    </div>
    </div>
    <div class="footer">底部</div>
</div>
</body>
</html>

在这里插入图片描述

解决方法：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>布局</title>
    <style>
      * {
        padding: 0;
        margin: 0;
      }
      .container {
        height: 100vh;
        width: 100%;
        background-color: aqua;
        display: flex;
        flex-direction: column;
      }
      .container .head {
        height: 100px;
        background-color: green;
      }
      .container .main {
        background-color: rgb(255, 102, 0);
        flex: 1;
        /* 超出主体的内容隐藏 */
        overflow: hidden;
        /* 并将主体设置为flex布局 */
        display: flex;
      }
      /* 主体内部的内容填充主体容器高度，超出部分滚动查看 */
      .container .main .body {
        flex: 1;
        overflow-y: auto;
      }
      .container .footer {
        height: 100px;
        background-color: rgb(137, 206, 97);
      }
    </style>
</head>
<body>
<div class="container">
    <div class="head">头部</div>
    <div class="main">
    <div class="body">
        <div>主体内容</div>
        <div>主体内容</div>
        <div>主体内容</div>
        <div>主体内容</div>
        <div>主体内容</div>
        <div>主体内容</div>
        <div>主体内容</div>
        <div>主体内容</div>
        <div>主体内容</div>
        <div>主体内容</div>
        <div>主体内容</div>
        <div>主体内容</div>
        <div>主体内容</div>
        <div>主体内容</div>
        <div>主体内容</div>
        <div>主体内容</div>
        <div>主体内容</div>
        <div>主体内容</div>
        <div>主体内容</div>
        <div>主体内容</div>
        <div>主体内容</div>
        <div>主体内容</div>
        <div>主体内容</div>
        <div>主体内容</div>
        <div>主体内容</div>
        <div>主体内容</div>
        <div>主体内容</div>
        <div>主体内容</div>
        <div>主体内容</div>
        <div>主体内容</div>
        <div>主体内容</div>
        <div>主体内容</div>
        <div>主体内容</div>
        <div>主体内容</div>
        <div>主体内容</div>
        <div>主体内容</div>
        <div>主体内容</div>
        <div>主体内容</div>
        <div>主体内容</div>
        <div>主体内容</div>
        <div>主体内容</div>
        <div>主体内容</div>
        <div>主体内容</div>
        <div>主体内容</div>
        <div>主体内容</div>
        <div>主体内容</div>
        <div>主体内容</div>
        <div>主体内容</div>
        <div>主体内容</div>
        <div>主体内容</div>
        <div>主体内容</div>
        <div>主体内容</div>
        <div>主体内容</div>
        <div>主体内容</div>
        <div>主体内容</div>
        <div>主体内容</div>
        <div>主体内容</div>
        <div>主体内容</div>
        <div>主体内容</div>
        <div>主体内容</div>
        <div>主体内容</div>
        <div>主体内容</div>
        <div>主体内容</div>
        <div>主体内容</div>
        <div>主体内容</div>
        <div>主体内容</div>
        <div>主体内容</div>
        <div>主体内容</div>
        <div>主体内容</div>
        <div>主体内容</div>
        <div>主体内容</div>
        <div>主体内容</div>
        <div>主体内容</div>
        <div>主体内容</div>
        <div>主体内容</div>
    </div>
    </div>
    <div class="footer">底部</div>
</div>
</body>
</html>

在这里插入图片描述

最后用同样的方式给该布局增加菜单栏，也自适应显示，不让头部和底部变形挤出

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        .container {
            height: 100vh;
            width: 100%;
            background-color: aqua;
            display: flex;
            flex-direction: column;
        }

        .container .head {
            height: 100px;
            background-color: green;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        
        .container .footer {
            height: 100px;
            background-color: rgb(137, 206, 97);
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .container .main {
            background-color: rgb(255, 102, 0);
            flex: 1;
            overflow: hidden;
            display: flex;
        }
        
        .container .main .body {
            flex: 1;
            overflow-y: auto;
        }

        .container .main .body div {
            height: 200px;
            width: 100%;
            background-color: aqua;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .container .main .menu {
            display: flex;
            flex-direction: column;
        }

        .container .main .menu .logo {
            height: 100px;
            width: 100%;
            background-color: blueviolet;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .container .main .menu ul {
            flex: 1;
            overflow-y: auto;
        }

        .container .main .menu ul > li {
            height: 25px;
            width: 150px;
            display: flex;
            justify-content: center;
            align-items: center;
        }
    </style>
</head>
<body>
<div class="container">
    <div class="head">
        <h1>头部</h1>
    </div>
    <div class="main">
        <div class="menu">
            <div class="logo">
                <h1>Logo</h1>
            </div>
            <ul>
                <li>菜单</li>
                <li>菜单</li>
                <li>菜单</li>
                <li>菜单</li>
                <li>菜单</li>
                <li>菜单</li>
                <li>菜单</li>
                <li>菜单</li>
                <li>菜单</li>
                <li>菜单</li>
                <li>菜单</li>
                <li>菜单</li>
                <li>菜单</li>
                <li>菜单</li>
                <li>菜单</li>
                <li>菜单</li>
                <li>菜单</li>
                <li>菜单</li>
                <li>菜单</li>
                <li>菜单</li>
            </ul>
        </div>
        <div class="body">
            <div>主体内容</div>
            <div>主体内容</div>
            <div>主体内容</div>
            <div>主体内容</div>
            <div>主体内容</div>
            <div>主体内容</div>
            <div>主体内容</div>
            <div>主体内容</div>
            <div>主体内容</div>
            <div>主体内容</div>
            <div>主体内容</div>
            <div>主体内容</div>
            <div>主体内容</div>
            <div>主体内容</div>
            <div>主体内容</div>
            <div>主体内容</div>
            <div>主体内容</div>
            <div>主体内容</div>
            <div>主体内容</div>
            <div>主体内容</div>
            <div>主体内容</div>
            <div>主体内容</div>
            <div>主体内容</div>
            <div>主体内容</div>
            <div>主体内容</div>
            <div>主体内容</div>
            <div>主体内容</div>
            <div>主体内容</div>
            <div>主体内容</div>
            <div>主体内容</div>
        </div>
    </div>
    <div class="footer">
        <h1>底部</h1>
    </div>
</div>
</body>
</html>

在这里插入图片描述

avatar
文章
阅读
粉丝