Flex-утилиты

Активация flex

Направление (flex-direction)

Перенос (flex-wrap)

Выравнивание по главной оси (justify-content)

Выравнивание по поперечной оси (align-items)

Индивидуальное выравнивание (align-self)

Flex-grow

Gap-утилиты

Классы отступа общие для флекса, сетки и раскладок data-gr-layout: один .gr-gap вместо отдельных флекс- и грид-модификаторов.

Отдельных вариантов с суффиксом брейкпоинта нет: значение меняют сами токены, поэтому один и тот же класс даёт меньший отступ на мобильном и привычный — на десктопе.

Центрирование одним классом

<div class="gr-flex gr-flex-center gr-flex-items-center">
  <div>Идеально по центру</div>
</div>

Адаптивные варианты

Все flex-утилиты имеют варианты с суффиксом брейкпоинта. Они применяются только начиная с указанного размера экрана. Доступны суффиксы: -sm, -md, -lg, -xl.

<div class="gr-flex gr-flex-col gr-flex-row-md">
  <div>На мобильных — колонка</div>
  <div>На планшетах — ряд</div>
</div>

Контейнерные варианты

Направление и перенос переключаются и по ширине контейнера — ближайшего предка с .gr-cq. Суффикс тот же, с буквой c впереди: .gr-flex-row-cmd против .gr-flex-row-md, шкала — та же карта брейкпоинтов. Так собирается блок, который стоит то в боковой колонке, то в содержимом: столбик в узком гнезде, ряд в широком, без второй разметки и без JS.

<div class="gr-cq">
  <div class="gr-flex gr-flex-col gr-flex-row-csm gr-gap">
    <div>В гнезде уже 640px — столбик</div>
    <div>От 640px ширины гнезда — ряд</div>
  </div>
</div>

Примеры использования

Флекс — рабочая лошадка одномерных раскладок: всё, что выстраивается в ряд или колонку, собирается из него и токена .gr-gap-*. Рецепты ниже — от шапки до скролл-ленты; двумерные сетки и именованные области — территория грида.

Шапка с навигацией

<header class="gr-flex gr-flex-between gr-flex-items-center gr-p-4">
  <div class="gr-flex gr-flex-items-center gr-gap">
    <strong>Logo</strong>
    <nav class="gr-flex gr-gap">
      <a href="#">Home</a>
      <a href="#">About</a>
      <a href="#">Contact</a>
    </nav>
  </div>
  <button>Login</button>
</header>

Карточки в ряд с переносом

<div class="gr-flex gr-flex-wrap gr-gap">
  <div>Карточка 1</div>
  <div>Карточка 2</div>
  <div>Карточка 3</div>
</div>

Идеальное центрирование

Пустое состояние, сплэш, содержимое модалки — один блок точно по центру обеих осей. Флексом это пара .gr-flex-center .gr-flex-items-center; когда центрируется ровно один элемент, то же самое короче делает .gr-grid-place-center из грида. Флекс-вариант выигрывает, когда в центре стоит стопка: спиннер, подпись и кнопка складываются в .gr-flex-col с зазором.

<div class="gr-flex gr-flex-center gr-flex-items-center gr-min-h-screen">
  <div class="gr-flex gr-flex-col gr-flex-items-center gr-gap-sm">
    <span class="gr-spinner gr-spinner-lg"></span>
    <p class="gr-m-0 gr-text-ink-secondary">Загружаем проекты…</p>
  </div>
</div>

Выравнивание по базовой линии

Цена «2900 ₽ /мес» и шапка секции с ссылкой «Все →» — случаи, где элементы разного кегля должны стоять на одной строчной линии, а не по центру блока: центр у разных кеглей «пляшет». .gr-flex-items-baseline сажает всех на базовую линию текста, .gr-flex-between разводит заголовок и ссылку по краям.

<!-- цена -->
<p class="gr-flex gr-flex-items-baseline gr-gap-sm">
  <span class="gr-text-4xl gr-font-extrabold">2900 ₽</span>
  <span class="gr-text-sm gr-text-ink-secondary">/мес</span>
</p>

<!-- шапка секции -->
<div class="gr-flex gr-flex-between gr-flex-items-baseline">
  <h2>Новинки</h2>
  <a href="#">Все →</a>
</div>

Горизонтальная скролл-лента

Мобильный ряд категорий или карточек «с этим покупают»: ряд не переносится (.gr-flex-nowrap) и прокручивается пальцем — .gr-overflow-x-auto на контейнере. Карточкам нельзя сжиматься; класса «flex-none» в ядре нет, и он не нужен — флекс не сжимает элемент ниже его минимума, поэтому ширину ленты держит .gr-min-w-[160px] произвольным значением. Прищёлкивание к краю (scroll-snap) в утилитах не живёт — при желании это две строки своего CSS поверх той же разметки.

<div class="gr-flex gr-flex-nowrap gr-gap gr-overflow-x-auto gr-pb-2">
  <div class="gr-min-w-[160px]">Карточка</div>
  <div class="gr-min-w-[160px]">Карточка</div>
  …
</div>