flex的一种常用布局实现

秒速五厘米 2023-02-18 08:17 136阅读 0赞

**1.有些页面的内容较少，撑不起整个屏幕，结果底部内容显示在了屏幕中间位置。**

**2.中间部分实现圣杯布局**

**效果图：**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTIwMTEzNjA_size_16_color_FFFFFF_t_70][]

**代码：**

**主要使用了flex:1;**

<html>  
<head>  
    <meta charset="utf-8"/>  
    <title>内容过少时，底部内容不在浏览器最下方</title>  
    <style type="text/css">  
        \*\{  
            margin:0px;  
            padding:0px;  
        \}  
        .container\{  
            display:flex;  
            flex-direction:column;  
            width:100%;  
            height:100%;  
            text-align:center;  
        \}  
        .top\{  
            width:100%;  
            min-height:60px;  
        \}  
        .middle\{  
            flex:1;  
            background:\#8791b7;  
            min-height:600px;  
            display:flex;  
        \}  
        .center\{  
            flex:1;  
        \}  
        .left\{  
            width:50px;  
            background:red;  
        \}  
        .right\{  
            width:50px;  
            background:red;  
        \}  
        .bottom\{  
            width:100%;  
            min-height:60px;  
            background:\#ccc;  
        \}  
        /\*  
        flex:1;的作用  
        flex-grow : 1; // 这意味着div将以与窗口大小相同的比例增长  
        flex-shrink : 1; // 这意味着div将以与窗口大小相同的比例缩小  
        flex-basis : 0; // 这意味着div没有这样的起始值，并且将根据可用的屏幕大小占用屏幕。例如： - 如果包装器中有3个div，则每个div将占用33％  
        \*/  
    </style>  
</head>  
<body>  
<div class="container">  
    <div class="top">顶部</div>  
    <div class="middle">  
        <div class="left">左</div>  
        <div class="center">中</div>  
        <div class="right">右</div>  
    </div>  
    <div class="bottom">底部</div>  
</div>  
</body>  
</html>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTIwMTEzNjA_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200616171613197.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTIwMTEzNjA=,size_16,color_FFFFFF,t_70