什么是 Flexbox 布局？
Flexbox 布局（也称为弹性盒布局）是一种 CSS3 中的布局模式，它为页面布局提供了更加灵活的方式。通过将容器中的内容放置在一个灵活的容器中，您可以轻松地实现网页所需的多种布局。Flexbox 布局使用了可伸缩的容器和项目，使得网页内容可以更好地适应不同的屏幕大小和设备。
Flexbox 布局如何解决 footer 渲染问题？
在传统的网站布局中，footer 经常会出现在页面中的不同位置，这可能导致渲染问题，并且需要使用 CSS hack 和媒体查询等技巧来解决。然而，使用 CSS Flexbox 布局可以轻松解决这样的问题，而不需要复杂的技巧和代码。
Flexbox 布局中，您可以使用 flex-wrap 属性将项目放置在一行或者多行中。这意味着您可以轻松地实现一个 footer，让它总是出现在每个页面的底部位置，而不管整个页面是如何渲染的。
下面是一个基本的示例：
-- -------------------- ---- -------
--------- -----
------
------
----------------------
-------
---- -
-------- -----
--------------- -------
----------- ------
-
---- -
----- --
-
------ -
------------ --
-
--------
-------
------
--------
------ ------------
---------
------
---------- ---- --------
-------
--------
------------ - -- -----------
---------
-------
-------在这个示例中，我们首先给 body 设置了 display: flex，然后将 flex-direction 设置为 column，以便它的子元素可以在一个竖直方向上布局。接着，使用 min-height: 100vh，将 body 的高度设置为整个浏览器窗口的高度。
main 元素会根据它的内容高度自动扩展，因为它的 flex: 1 属性将填充 body 中的所有可用空间。而 footer 则使用了 flex-shrink: 0 属性，以防止它在主体内容很短时被压缩。
总结
CSS Flexbox 布局是一种灵活的布局方式，可以轻松解决网站中的渲染问题。使用 flex-wrap 属性可以实现一个固定位置的 footer，而不必在项目中添加大量代码和技巧。学习和使用 Flexbox 布局是现代前端开发的必备技能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/645e0822968c7c53b00708fc