问题背景
在前端开发中，我们经常使用 Flexbox 布局来实现页面的布局。但是在使用 Flexbox 布局时，有时会遇到谷歌浏览器垂直空白问题。这个问题的表现是，当使用 Flexbox 布局时，容器的高度会撑满整个屏幕，但子元素之间会出现一些奇怪的垂直空白。
问题分析
这个问题的原因是 Flexbox 布局中，子元素的 align-items 属性默认为 stretch。也就是说，子元素会被拉伸到和容器一样的高度。但是如果子元素中有一些元素设置了自身的高度，那么这些元素就会被拉伸，导致出现垂直空白。
解决方案
解决这个问题的方法就是给子元素设置一个固定的高度。这样就不会被拉伸了，从而避免了垂直空白的出现。
下面是一个示例代码，展示了如何使用 Flexbox 布局，并解决垂直空白问题。
--------- -----
------
------
-------------- ------------
------ ----------------
---------- -
-------- -----
--------------- ----
------- ------
----------------- --------
------------ -------
---------------- -------
-
----- -
------ ------
------- ------
----------------- --------
------- -----
------ -----
----------- -------
------------ ------
---------- -----
-
------- -
------- -----
-
--------
-------
------
---- ------------------
---- --------------------
---- ----------- ---------------
---- --------------------
------
-------
-------在上面的代码中，我们给第二个子元素（class 为 item-2）设置了 height: auto; 属性，从而解决了垂直空白问题。
总结
在使用 Flexbox 布局时，如果出现了谷歌浏览器垂直空白问题，可以通过给子元素设置固定的高度来解决。这个问题的原因是子元素默认会被拉伸到和容器一样的高度，如果子元素中有一些元素设置了自身的高度，就会出现垂直空白。希望本文能够对大家的工作有所帮助。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/660ae850d10417a222ab3a99