前言

你可能遇到过如下问题，当页面内容较少时，底部会跟随内容到页面中间显示，

聪明的你可能立马想到用position：fixed固定定位来解决。这样底部始终固定在底部，
不受内容多少的影响。如果你不想固定底部，还有其它方法可以解决吗？答案是肯定的，
Flex弹性布局就能解决该问题。

 
Demo
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>demo</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        body {
            border: 2px solid rgb(0, 255, 149);
        }
        .demo {
            display: flex;
            /* flex-flow分别是flex-direction和flex-wrap的简写 */
            flex-flow: column nowrap;
            height: 100vh;
        }

        .content {
            /* flex: auto为flex: 1 1 auto的快捷值写法，flex：1 1 auto为flex-grow,flex-shrink,flex-basis 3个属性的简写，
            默认值为0 1 auto，后面两个属性可选，所以这里的flex: auto也通常被写为flex: 1*/
            flex: auto;
            padding: 20px;
            color: #000;
            background-color: #c50909;
        }

        .footer {
            padding: 20px;
            color: #fff;
            background-color: #000;

        }
    </style>
</head>

<body>

    <div class="demo">
        <div class="content">这是主要内容</div>

        <div class="footer">这是底部</div>
    </div>

</body>

</html>

 

有需要的朋友可以领取支付宝到店红包，能省一点是一点