css底部对齐布局

         在平常的开发中，沿着某个容器的底部对齐的场景比较多，实现沿着底部布局的方式很多，常用的方式有一下几种：

一、绝对定位

<div class="container">
     父容器
    <div class="footer-absolute">
        底部
    </div>
</div>

<style>
    html body {
        margin: 0;
        padding: 0;
    }
    .container {
        width: 100vw;
        height: 100vh;
        text-align: center;
        background-color: chartreuse
    }

    .footer-absolute {
        width: 100%;
        height: 48px;
        line-height: 48px;
        text-align: center;
        background-color: aqua;
        position: absolute;
        bottom: 0;
    }

</style>

      绝对定位可以将元素直接定位到整个可视页面的最底部，不受父容器的约束，有些场景使用不受灵活，此处position使用fixed固定定位效果也一样，稍微有区别的就是，使用fixed定位，如果在加一层盒子，使用相对定位，定位效果失效

二、弹性盒子

<div class="container">
    <div class="footer-flex">
        底部
    </div>
</div>

   .container {
        width: 100vw;
        height: 100vh;
        text-align: center;
        background-color: chartreuse;
        display: flex;
        flex-direction: column-reverse;
    }

    .footer-flex {
        width: 100%;
        height: 48px;
        line-height: 48px;
        text-align: center;
        background-color: aqua;
        /* 沿主轴对齐方式，flex-direction: column 从底部向上，flex-direction: row 从右至左，flex-start方向相反 */
        justify-content: flex-end;
    }