为什么 Flexbox 不能按预期使用 `` 元素？

为什么

抵抗 Flexbox

将 Flex 显示应用于

时元素，在 Firefox 和 Chrome 等浏览器中会出现意外行为。 Flex 的行为类似于 block，而 inline-flex 的行为类似于 inline-block，尽管规范没有指示对

进行任何特殊处理。

原因

根据 Bug 984869、

以及 和 不能完全在纯 CSS 中实现，因此充当黑盒。这意味着它们可能不会对其他 CSS 样式元素做出相同的响应。

具体而言，对于

，浏览器使用预定的框架类来呈现它，该框架类控制其子元素的布局。此框架类会覆盖 CSS 中设置的显示属性。

最佳实践

在

中实现所需的布局跨浏览器，建议使用包装器

在

中，类似于在

中的操作。

Firefox 更新

Firefox 版本 46 及更高版本为

实现 Flexbox fieldset>，解决 Bug 1230207。