CSS Tip

Safe align your content

Do you know the safe keyword? In some specific cases, your content may overflow the container and you won't be able to scroll to it. It happens with some alignment configurations such as center and end.

safe can prevent this behavior!

/* default behavior, not always good 🤨 */
.box {
  justify-content: center; 
}

/* safe alignment! 😌 */
.box {
  justify-content: safe center; 
}

Resize the container below and toggle the safe option to see the difference.

See the Pen Safe alignment by Temani Afif (@t_afif) on CodePen.

It works with all the alignment properties.

.container {
  /* place-content, justify-content,  align-content */
  /* place-items, justify-items, align-items */
}
.element {
  /* place-self, justify-self, align-self: */
}

It's not only limited to flexbox and CSS Grid, it's also applicable to block layout:

See the Pen Safe alignment with block containers by Temani Afif (@t_afif) on CodePen.

Note that auto margin is another alternative for safe alignment:

See the Pen Safe alignment with auto margin by Temani Afif (@t_afif) on CodePen.

More CSS Tips