Flex / Grid 布局不适用于按钮或字段集元素

Question

我正在尝试使用 flexbox 的justify-content: center将<button> -tag 的内部元素justify-content: center 。 但是 Safari 不会将它们居中。 我可以将相同的样式应用于任何其他标签，并且它按预期工作（请参阅<p> -tag）。 只有按钮是左对齐的。

尝试使用 Firefox 或 Chrome，您会看到不同之处。

是否有我必须覆盖的用户代理样式？ 或者这个问题的任何其他解决方案？

 div { display: flex; flex-direction: column; width: 100%; } button, p { display: flex; flex-direction: row; justify-content: center; }

 <div> <button> <span>Test</span> <span>Test</span> </button> <p> <span>Test</span> <span>Test</span> </p> </div>

还有一个 jsfiddle： http : //jsfiddle.net/z3sfwtn2/2/

Answer 1

问题

在某些浏览器中，除了在block和inline-block之间切换之外， <button>元素不接受对其display值的更改。 这意味着<button>元素不能是 flex 或 grid 容器，也不能是<table> 。

除了<button>元素，您可能会发现此约束也适用于<fieldset>和<legend>元素。

有关更多详细信息，请参阅下面的错误报告。

注意：虽然它们不能是弹性容器，但<button>元素可以是弹性项目。

---

解决方案

这个问题有一个简单易行的跨浏览器解决方法：

将button的内容包裹在一个span ，并使span成为 flex 容器。

调整后的 HTML（在span包装button内容）

<div>
    <button>
        <span><!-- using a div also works but is not valid HTML -->
            <span>Test</span>
            <span>Test</span>
        </span>
    </button>
    <p>
        <span>Test</span>
        <span>Test</span>
    </p>
</div>

调整后的 CSS（目标span ）

button > span, p {
    display: flex;
    flex-direction: row;
    justify-content: center;
}

修改后的演示

---

参考资料/错误报告

<button> Flexbox 会阻塞内容，但不会建立 flex 格式上下文

用户 (Oriol Brufau)： <button>的子元素被阻止，正如 flexbox 规范所规定的那样。 然而， <button>似乎建立了一个块格式上下文而不是一个 flex 上下文。

用户 (Daniel Holbert)：这实际上是 HTML 规范所要求的。 几个 HTML 容器元素是“特殊的”，有效地忽略了它们在 Gecko 中的 CSS display值 [除了它是内联级还是块级]。 <button>就是其中之一。 <fieldset>和<legend>也是如此。

在<button>元素内添加对 display:flex/grid 和 columnset 布局的支持

用户（丹尼尔霍尔伯特）：

<button>不能在纯 CSS 中实现（由浏览器），所以从 CSS 的角度来看，它们有点像一个黑盒子。 这意味着它们的反应方式不一定与例如<div>反应方式相同。

这不是 flexbox 特有的——例如，如果您将overflow:scroll放在按钮上，我们不会渲染滚动条，如果您将display:table放在按钮上，我们不会将其渲染为表格。

退一步说，这不是特定于<button> 。 考虑<fieldset>和<table> ，它们也具有特殊的呈现行为。

而像<button>和<table>和<fieldset>这样的老式 HTML 元素根本不支持自定义display值，除了用于回答“这个元素是块级还是内联”这一非常高级的问题之外， level”，用于在元素周围流动其他内容。

另见：

• Flexbug #9：一些 HTML 元素不能是 flex 容器
• 10. 一些 HTML 元素不能作为网格容器

Answer 2

这是我最简单的黑客。

button::before,
button::after {
    content: '';
    flex: 1 0 auto;
}

Answer 3

从 Chrome 83 开始，该button现在用作inline-grid/grid/inline-flex/flex ，您可以在此处查看有关此新功能的更多信息

这是一个片段（适用于使用 Chrome 83 及更高版本的用户）

 button { display: inline-flex; height: 2rem; align-items: flex-end; width: 4rem; -webkit-appearance: none; justify-content: flex-end; }

 <!-- The align-items keyword should fail in Chrome 81 or earlier, but work in Chrome 83 or later. To see the error, the button needs styles that make it more of an extrinsic container. In other words, it needs a height or width set. --> <button>Hi</button> <input type="button" value="Hi">