Safari 17.6

#Flexbox の safe キーワード

Flexbox の指定にsafeが利用できるようになった。 Chrome や Edge、Firefox でも利用可能。

justify-content: safe center;

safeを利用すると、オーバーフローが発生した際に、startであるかのように配置される。 一方、unsafeを指定するか何も指定しない場合は、オーバーフローが発生した際でも、指定した通りの配置が維持される。

つまり、safeの指定の有無で、次のような違いが生じる。