假设您有一个网站，其中包含使用Flexbox创建的标题，内容区域和页脚，如下所示：
https://codepen.io/anthonyLukes/pen/DLBeE
标题位于窗口的顶部，页脚位于底部，内容区域填充其间的空间。如果内容大于内容div，则仅显示该div的滚动条。
从视觉上来说，这是一种享受，但确实会产生一个奇怪的问题：键盘滚动不再有效。
由于页面没有主要内容区域的自然概念，因此按下向下翻页，向下箭头和结束不会执行任何操作。要使用键盘滚动页面，必须先单击内容div！
您可以使用JavaScript解决此问题（请注意，此ID未在Codepen示例中设置）：
document.getElementById("content").focus();
此外，对于Opera（可能是Chrome），内容div也必须设置tabindex（否则上述指令不执行任何操作）。
现在，对我而言，这似乎是错误的。可以理所当然地说，应该有一种方式来声明性地指示页面的哪个部分最初应该向上/向下滚动，向上/向下和家庭/结束滚动而不必诉诸JavaScript。使用Flexbox实现干净的整页布局不应该打破用户长期以来对键盘滚动页面的期望。
但是，我找不到任何其他人曾经注意到这个问题的建议。在实施上述内容后，我几乎立即发现了它！
请注意，<!DOCTYPE HTML>与<header>，<main>和<footer>一起使用也无效。由于Flexbox可用于页面的任何部分，因此似乎不是一个简单的问题：浏览器还必须了解有问题的Flexbox构成整个页面并应设置滚动！
实际上有一种方法可以指示哪个Flex面板应该以键盘焦点开始吗？