「display: flex」が「要素」で機能しないのはなぜですか?

Fieldset 要素が Flex コンテナとして動作しない理由

display: flex または display: inline-flex を使用した fieldset 要素のスタイル設定予想とは異なる動作をするので頭を悩ませるかもしれません。フレキシブル コンテナとして動作するのではなく、それぞれブロック要素またはインライン ブロック要素と同様に動作します。

バグまたは予期される動作?

Firefox および Chrome でのこの動作(驚くべきことに IE では動作しますが) バグではありません。 Bug 984869 によると、ボタン要素は特別な処理でレンダリングされ、表示などの CSS プロパティを無視する可能性があります。この動作はボタンに固有のものではありません。 fieldset、table、del 要素も同様のレンダリング異常を示します。

解決策

CSS フレキシブル ボックス レイアウトで指定されたとおりに fieldset 要素の子を確実にレイアウトするには場合は、回避策を使用する必要があります。フィールドセット内の div コンテナ内に子要素をラップします。このアプローチはブラウザ間で一貫して機能し、あらゆる場合に望ましいレイアウトを確保します。

Firefox 46 以降

ただし、Firefox ユーザーにとって朗報です: Firefox 46 以降実装では、fieldset 要素の Flexbox がサポートされています (バグ 1230207 を参照)。これは、回避策を必要とせずにフィールドセットで display: flex を使用できることを意味します。

以上が「display: flex」が「要素」で機能しないのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。