中央フレックスボックスのアイテムは、望ましくない動作をする可能性がありますwhen they overflow their container。フレックスボックスで安全センターを使用するには?
この問題では、いくつかの非フレックスソリューションが提供されていますが、according to MDNの値はsafe
です。この値は次のとおりです。
アイテムのサイズがアライメントコンテナをオーバーフローする場合、アイテムはアライメントモードが開始されたかのように、代わりにアライメントされます。
以下のように使用できます。
align-items: safe center;
残念ながら、私はこの任意の例や議論を見つける、またはそれのためにそこにあるどのくらいのブラウザのサポートを決定することができていません。
私はsafe
in this CodePenを使用しようとしました。しかし、それは私のためには機能しません。 safe
は無視されているようですが、おそらくコンテナ要素のスタイルが不適切です。
誰かがsafe
について光を当てることができ、CodePenの例で示されているようにオーバーフローの問題を解決するために使用できるかどうか、またそれをどのように使用できるのか本当に感謝します。