Strict Order в Zero Block

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

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

Для каждого разрешения экрана можно задать своё значение Strict Order. Например, на десктопе текст может быть третьим элементом в группе, а на мобилке — последним.

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

Разберём на примере блока с карточками товаров, когда может быть полезно свойство Strict Order.

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

При переходе на редактирование мобильной версии порядок карточек становится хаотичным. При перемещении их вручную, также меняется композиция и на десктопной версии.

Чтобы этого не происходило, зададим нужным нам элементам кастомное значение Strict Order. Так карточки встанут в нужном нам порядке в мобильной версии сайта, а композиция для десктопа останется прежней.