7 июля 2025

Strict Order в Zero Block

Теперь в Zero Block можно менять порядок элементов внутри автолейаута на разных разрешениях экрана с помощью настройки Strict Order. Это пригодится, когда положение элементов в флекс-группе должно отличаться для мобильной версии сайта и десктопной.

Как работает Strict Order

Свойство Strict Order задаёт порядок расположения элементов внутри автолейаута. По умолчанию у всех флекс-элементов order: 0 (Not set). Элементы с меньшим значением order располагаются первыми. Если задать одному из них значение -1 (First), элемент встанет на первое место. Если 1 (Last) — на последнее.

Для каждого разрешения экрана можно задать своё значение Strict Order. Например, на десктопе текст может быть третьим элементом в группе, а на мобилке — последним.
Свойство Strict Order будет полезно и для сложных композиций, состоящих из большого количества элементов. Если нескольким из них нужно поменять расположение для мобильного экрана, задайте каждому своё значение с помощью поля Custom, например, от 1 до 6. Так будет легче расставить их в нужном порядке.

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

Разберём на примере блока с карточками товаров, когда может быть полезно свойство Strict Order.
В Zero Block свёрстана такая композиция из 6 смысловых элементов: 4 карточки товаров и 2 плитки, ведущие в каталог. Группе задан общий автолейаут, чтобы редактировать содержимое и верстать адаптивы было проще.
При переходе на редактирование мобильной версии порядок карточек становится хаотичным. При перемещении их вручную, также меняется композиция и на десктопной версии.
Чтобы этого не происходило, зададим нужным нам элементам кастомное значение Strict Order. Так карточки встанут в нужном нам порядке в мобильной версии сайта, а композиция для десктопа останется прежней.
Читайте также

Организуйте работу как удобно — ведите регламенты для компании, документацию по проекту, создайте публичную базу знаний и многое другое.

Создавайте эффектные маркетинговые квизы: гибкие настройки внешнего вида, сообщения от «консультанта», ветвление полей и результатов и многое другое.

Made on
Tilda