Flexboxがボタンやフィールドセットの要素で動作しない - html、css、css3、safari、flexbox

私は内側の要素を中心にしようとしています <button>フレックスボックスでのタグ justify-content: center。しかし、Safariはそれらを中心にしていません。他のタグにも同じスタイルを適用することができます。 <p>-タグ）。ボタンのみが左揃えになります。

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/

回答：

問題は、 <button> 要素は、フレックス（またはグリッド）コンテナとして設計されていません。

この執筆時点では、Webkitベースのブラウザ（ChromeとSafari）がこの設計原則に準拠しています。 FirefoxとEdgeはそうではありません。私は他のブラウザをテストしませんでした。

したがって、問題を起こさずに <button> 要素FirefoxとEdgeのフレックス（またはグリッド）コンテナ。しかし、ChromeやSafariで動作するとは思っていません。

この動作は現在、少なくとも3つの要素に適用されます。

• <button>
• <fieldset>
• <legend>

私は理論化していますが、HTML要素をスタイリングするときに常識的なレベルを維持することがアイデアだと考えています。たとえば、HTMLの神様は、作成者がボタンをテーブルに変えないようにしたいと考えました。

しかし、少なくともこの場合、 シンプルで簡単な回避策：

内容をラップします button 〜で span、そして span フレックスコンテナ。

調整されたHTML（ラップされた button のコンテンツ span）

<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 要素はフレックスアイテムにすることができます。

参考文献：

• Bug 984869 - display：flexがボタン要素で機能しない
• Bug＃1176786 - FlexBoxがコンテンツをブロックするが、フレックスフォーマットのコンテキストを確立しない
• Bug＃10 - HTML要素の中には、グリッドコンテナ

ここで私の最も単純なハックです。

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