Flex と Flex-Grow が入力要素とボタン要素で機能しないのはなぜですか?

Flex と Flex-Grow が入力要素とボタン要素に影響しない

Flexbox では、コンテナ内の要素のサイズと位置を次のように設定できます。 flex プロパティと flex-grow プロパティ。ただし、これらのプロパティは、input 要素と button 要素に適用すると、期待どおりに機能しないように見える場合があります。

理由:

DIV とは異なり、input 要素と button 要素にはデフォルトの幅とフレックスボックスをオーバーライドする高さ設定プロパティ.

図:

[ブラウザが入力要素に割り当てたデフォルトの幅を示す画像]

画像に見られるように、ブラウザは自動的にCSS スタイルを設定しない場合でも、入力要素の幅を設定します。

解決策:

Flexbox で入力要素とボタン要素のサイズを制御できるようにするには、デフォルトの幅と高さの設定を削除する必要があります:

input, button {
  width: auto;
  height: auto;
}

これらのデフォルト設定を削除すると、flex プロパティと flex-grow プロパティが期待どおりに有効になるはずです。

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