Как реализовать Fallback alignment в CSS?

Fallback alignment в CSS

Fallback alignment — это механизм, который обеспечивает fallback-поведение, когда основное выравнивание не может быть применено. Это часть CSS Box Alignment Module Level 3.

Что такое Fallback Alignment?

Fallback alignment — это второй параметр в свойствах выравнивания, который активируется в определённых условиях:

• Когда свободное пространство недоступно
• Когда основное выравнивание не может быть реализовано
• В flexbox: когда flex-direction задан таким образом, что основное выравнивание не работает

Синтаксис

/* Формат: primary-alignment fallback-alignment */
align-content: center safe flex-end;
justify-content: start safe space-between;
align-items: center unsafe flex-start;

safe и unsafe модификаторы:

• safe (безопасное) — fallback выравнивание активируется автоматически
• unsafe (небезопасное) — игнорирует fallback и может привести к потере данных (overflowing)

Практические примеры

1. Flexbox с fallback

.container {
  display: flex;
  justify-content: center safe flex-start;
  /* Если нет свободного места для center, используй flex-start */
}

.item {
  width: 300px;
}

Этот код означает:

• Попытайся выровнять по центру (primary)
• Если свободного места недостаточно, выровняй по началу (fallback)

2. Grid с fallback

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-content: space-around safe center;
  /* Если space-around невозможен, используй center */
}

3. Распределённое выравнивание

.container {
  display: flex;
  justify-content: space-between safe center;
  
  /* 
    - Первый выбор: space-between (распредели с пробелами)
    - Если не получается: center (выровняй по центру)
  */
}

Когда fallback активируется?

Случаи активации:

1. justify-content в блочном контейнере (не flex/grid)

   • Не работает, используется fallback

2. align-content при одной линии (flex/grid с одной строкой)

   • align-content работает только с несколькими строками
   • Одна строка → используется fallback

3. Переполнение (overflow)

   .container {
     display: flex;
     width: 200px;
     justify-content: center safe flex-start;
   }
   
   .item {
     width: 300px; /* Больше чем контейнер */
   }
   /* safe активирует flex-start, чтобы не спрятать контент */
   

Safe vs Unsafe

Safe (безопасное)

.safe-example {
  display: flex;
  width: 100px;
  justify-content: center safe flex-start;
}

/* 
  Результат: контент видим (flex-start),
  даже если центр скрыл бы его
*/

Unsafe (небезопасное)

.unsafe-example {
  display: flex;
  width: 100px;
  justify-content: center unsafe flex-start;
}

/* 
  Результат: может быть overflow и потеря видимости,
  но соблюдается center, если возможно
*/

Таблица fallbacks по умолчанию

Реальный пример: адаптивный layout

.hero-container {
  display: flex;
  min-height: 100vh;
  justify-content: space-around safe center;
  align-items: center;
}

/* 
  На большом экране: space-around (элементы разведены)
  На мобильном: center (когда no space, используй center)
  safe: переполненный контент остаётся видимым
*/

.hero-item {
  flex: 0 1 300px;
}

Поддержка браузерами

Важно:

• Chrome/Safari: полная поддержка
• Firefox: поддержка частичная
• IE11: не поддерживает

/* Fallback для старых браузеров */
.container {
  display: flex;
  justify-content: center;  /* Для IE11 */
  justify-content: center safe flex-start;  /* Для современных браузеров */
}

Практический совет

В большинстве случаев используй safe модификатор:

/* ✅ Хорошо */
align-content: center safe flex-start;
justify-content: space-between safe center;

/* ❌ Плохо (может скрыть контент) */
align-content: center unsafe flex-start;

Fallback alignment — это инструмент для создания resilient layouts, которые работают при разных размерах контента и экрана. Использование safe гарантирует, что ваш контент останется доступным.