safeキーワードを使ってあふれたアイテムをなんとか伝える

Safari TP 190でflexboxのsafeキーワードが追加された。

※2023-03-07現在、Chrome115、Edge115、Firefox63、Safari TPで対応

safeキーワードがない場合、あふれた文章の真ん中だけが表示され、ユーザーに伝わらなくなる。たとえば「safeキ [ーワードが] 追加された」のように「ーワードが」と表示されても意味が伝わらない。

そこで、safeキーワードを使うとコンテナ要素からはみ出した場合に「文章の先頭だけ表示」ができるようになる。

<div class="container">
  <div class="item">center</div>
  <div class="item">safeキーワードをつけておくとコンテナから溢れたときにstartと同様の配置になる</div>
</div>

<style>
.container {
  display: flex;
  flex-direction: column;
  align-items: safe center; /* safeキーワードをつける */
}
</style>

デモ

safeを使わない場合

safeを使う場合