使用 CSS Flexbox 将页脚保持在底部

我刚刚读了一篇关于使用 CSS-Grid 将页脚保持在底部的文章。
阅读的时候，我感觉只用 flexbox 来实现同样的效果有点难。其实并不难。

这绝不是贬低我之前提到的那篇文章，它解释得非常透彻，而且在我看来比 Flexbox 更优雅。我只是想解释一下，Flexbox 和 grid 一样简单，所以即使你因为某种原因无法使用 grid，你也可以毫不犹豫地用 Flexbox 来实现。

我将使用与参考文章中相同的 HTML：

<html>
    <body>
        <article>
            <header>
            </header>
            <main>
            </main>
            <footer>
            </footer>
        </article>
    </body>
</html>

这里的 CSS 是将页脚放在底部，它应该在底部：

html, body {
    width: 100%;
    height: 100%;
}

article {
    min-height: 100%;
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

main {
    flex-grow: 1;
}

header, main, footer {
    flex-shrink: 0;
}

在容器上，我们设置了弹性框 (Flexbox)，使内容按列对齐。元素应该拉伸，使其覆盖整个宽度，而不仅仅是内容占据的宽度。

设置flex-grow: 1为 on main 会使其扩展至填满可用空间。这会将页脚置于底部，因为它main占据了中间的所有空间。

for 的用法flex-shrink: 0可能不太明显，而且经常被忘记。至少我忘记的次数比我愿意承认的要多得多。

默认情况下，flex-shrink设置为1。如果空间不足（例如内容大于屏幕），这会使项目缩小。结果可能看起来很奇怪，例如按钮比其包含的文本还小。将其设置为可以0停止这种行为。

就是这样。这就是你需要知道的关于如何用弹性盒子将页脚定位到底部的全部内容。:)

在Twitter上关注我，了解我的更多想法、文章、项目和工作。

文章来源：https://dev.to/domysee/keeping-the-footer-at-the-bottom-with-css-flexbox-5h5f