Internet Explorer 11 での Flexbox の問題を解決するにはどうすればよいですか?

IE のフレックスボックスの問題を解決する

IE11 でフレックスボックスを利用できませんか?この問題は、IE の flex プロパティの解析が難しいために発生します。以下にいくつかの回避策を示します。

ロングハンド プロパティの使用

短縮形式の flex プロパティ (例: flex: 0 0 35%) の使用を避けます。代わりに、次のような長期的なプロパティを使用します。

• flex-grow: 0
• flex-shrink: 0
• flex-basis: 35%

有効化フレックスシュリンク

フレックス宣言でフレックスシュリンクが有効になっていることを確認してください。コードを flex: 0 0 35% から flex: 0 1 35% に変更してみてください。

Flex ベースの値の変動に対処する

IE11 は flex- で異なる動作を示します。基準値。次のバリエーションを試してください:

• flex: 1 1 0
• flex: 1 1 0px
• flex: 1 1 0%

デバッグを引き起こす可能性がある 0px を 0 に変換するミニファイアーに注意してください問題があります。

Flex: Auto の使用

flex: 1 を flex: auto に置き換えます。これは次のことを意味します:

• flex-grow: 1
• フレックスシュリンク: 1
• flex-basis: auto

これにより、メディア クエリで行から列へのフレックス方向に移行するときに項目が折りたたまれるのを防ぎます。

古い-従来の幅/高さのプロパティ

従来の幅と高さに戻すことを検討してください

ブロック レイアウトの採用

場合によっては、ブロック レイアウト (表示: block) でフレックス レイアウト (表示: flex; flex-) を適切に置き換えることができます。方向: 列) 特定のコンテナ内。

以上がInternet Explorer 11 での Flexbox の問題を解決するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。