フレックス/グリッドレイアウトがボタンまたはフィールドセット要素で機能しない

Question 1

<button>-tagの内部要素を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/

Question 2

問題

一部のブラウザでは、<button>要素はとのdisplay切り替え以外に、値の変更を受け入れません。これは、要素がフレックスまたはグリッドコンテナ、あるいはのいずれにもなり得ないことを意味します。blockinline-block<button><table>

加え<button>要素は、これに適用する制約見つけること<fieldset>と<legend>同様に、要素を。

詳細については、以下のバグレポートを参照してください。

注：フレックスコンテナにすることはできませんが、<button>要素はフレックスアイテムにすることができます。

ソリューション

この問題には、シンプルで簡単なクロスブラウザーの回避策があります。

内容ラップ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>Flexboxはコンテンツをブロックしますが、フレックスフォーマットコンテキストを確立しません

ユーザー（Oriol Brufau）：フレックスボックスの仕様に応じて、の子<button>はブロックされます。ただし、は<button>フレックスコンテキストではなくブロックフォーマットコンテキストを確立しているようです。

ユーザー（Daniel Holbert）：それは事実上HTML仕様が要求するものです。いくつかのHTMLコンテナ要素は「特別」でありdisplay、GeckoでのCSS値を事実上無視します[インラインレベルかブロックレベルかは別として]。<button>これらの1つです。<fieldset>＆<legend>も同様です。

<button>要素内のdisplay：flex / gridおよびcolumnsetレイアウトのサポートを追加します

ユーザー（Daniel Holbert）：

<button>純粋なCSSでは（ブラウザーでは）実装できないため、CSSの観点からは少しブラックボックスになっています。これは、彼らが必ずしも同じように反応するとは限らないことを意味し<div> ます。

これはフレックスボックスに固有のものではありません。たとえばoverflow:scroll、ボタンを配置した場合はスクロールバーをレンダリングせず、ボタンを配置した場合はテーブルとしてレンダリングしませんdisplay:table。

さらに一歩下がると、これはに固有のものではありません<button>。考えてみましょう<fieldset>と<table>これも特殊なレンダリング挙動を有します。

など古いtimey HTML要素<button>と<table>し、<fieldset>単にカスタムサポートしていないdisplay要素の周りに他のコンテンツを流すため、「この要素をブロックレベルやインラインレベルである」のは非常に高レベルの質問に答えるの目的以外の値を、。

参照：

Question 3

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

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

Question 4

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">

スニペットを展開