入力要素とボタン要素で Flex プロパティが機能しないのはなぜですか?

フレックス コンテナの入力/ボタン要素に影響を与えないフレックス プロパティ

フレックスボックス レイアウトでは、要素が期待どおりに応答しないのが一般的です。 flex または flex-grow プロパティ。この問題は、特に input 要素と button 要素に影響します。

Input 要素のデフォルトの動作を理解する

div 要素とは異なり、input 要素にはブラウザによって設定されたデフォルトの幅があります。これにより、flex ベースのサイズ変更が妨げられる可能性があります。

入力要素に flex または flex-grow を適用すると、ブラウザは要素のサイズを変更しようとしますが、デフォルトの幅がこの作業をオーバーライドします。したがって、これらのプロパティは効果がないように見えます。

問題の修正

この問題を解決するには、CSS を使用して入力要素のデフォルトの幅を削除します。

input {
  width: inherit;
}

または、CSS リセットを使用して、デフォルトの入力幅を含むすべてのデフォルトのブラウザ スタイルを削除することもできます。

デフォルトの幅が削除されると、flex プロパティと flex-grow プロパティは、Flexbox コンテナ内の入力要素とボタン要素で期待どおりに機能するようになります。

以上が入力要素とボタン要素で Flex プロパティが機能しないのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。