Flexbox无法处理按钮或字段集元素

Question

我试图<button>用flexbox的中心元素的中心元素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

问题是<button>元素不是设计为flex(或网格)容器.

在撰写本文时,基于Webkit的浏览器(Chrome和Safari)遵循这一设计原则.Firefox和Edge没有.我没有测试其他浏览器.

因此,display在Firefox和Edge中将元素设置为flex(或网格)容器应该没有问题.但不要指望它可以在Chrome或Safari中使用.

此行为目前适用于至少三个元素:

• block
• inline-block
• <button>

我是理论化的,但我相信这个想法是在设计HTML元素时保持一定的常识.例如,HTML神想要阻止作者将按钮变成表格.

但是,至少在这种情况下,有一个简单易行的解决方法:

包裹的内容<table>中<button>,使<fieldset>柔性容器.

调整后的HTML(包装<legend>内容在a中<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(目标button)

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

修订演示

注意:虽然它们不能是弹性容器,但span元素可以是弹性项目.

参考文献:

• 错误984869 - 显示:flex不适用于按钮元素
• 错误1176786 - 上的Flexbox会阻止内容,但不会建立Flex格式上下文
• 错误#10 - 某些HTML元素不能是网格容器

Answer 2

这是我最简单的黑客攻击.

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