В CSS есть ключевое слово safe, которое используется вместе со значениями выравнивания и не даёт контенту «вылезать» за границы контейнера. Если элемент не помещается при обычном выравнивании, браузер автоматически смещает его так, чтобы он оставался видимым.
Это удобно в адаптивных интерфейсах, где размеры могут меняться и важно не терять доступ к содержимому. safe работает с flexbox, grid и свойствами вроде align-items, justify-content и другими.
Простой пример:
.container {
display: flex;
justify-content: safe center;
}
Здесь элементы будут центрироваться, но если не помещаются, выравнивание изменится так, чтобы их не обрезало.
Подробнее читать тут: https://iprodan.dev/l/safe-alignment/
#css #flex #safe