Ordem rigorosa no Zero Block

No Zero Block, agora é possível definir a disposição dos elementos no Auto Layout em diferentes resoluções de tela usando a configuração Strict Order. Isso é útil quando você deseja que a posição dos elementos do Flex Group varie nas versões para celular e desktop.

A configuração Strict Order define a ordem dos elementos no Auto Layout. Por padrão, todos os elementos flexíveis têm um valor de ordem 0 (Não definido). Os elementos com um valor de ordem inferior são colocados primeiro. Se você definir um deles como -1 (Primeiro), o elemento será colocado primeiro. Se for 1 (Last), ele será colocado por último.

É possível definir um valor de Strict Order diferente para cada resolução de tela. Por exemplo, em um desktop, o texto pode ser o terceiro elemento do grupo e, em um celular, o último.

A ordem estrita também é útil para composições complexas com um grande número de elementos. Se vários deles precisarem ser reorganizados para a tela do celular, especifique um número diferente para cada um deles usando o valor Personalizado (por exemplo, de 1 a 6). Isso facilitará a organização na ordem desejada.

Vamos dar uma olhada em um exemplo com um bloco de cartão de produto para ver quando a configuração Strict Order pode ser útil.

No Zero Block, criamos um layout com seis elementos: Quatro cartões de produtos e dois blocos com links para o catálogo. Esse grupo tem um Auto Layout comum para facilitar a edição de conteúdo e o design de versões responsivas.

Ao mudar para a edição da versão móvel, a ordem dos cartões pode ficar desorganizada. Se você os mover manualmente, a composição também será alterada na versão para desktop.

Para evitar isso, você pode atribuir um valor personalizado em Strict Order aos elementos de que precisa. Dessa forma, os cartões aparecerão na ordem correta na versão móvel do seu site, enquanto o layout do desktop permanecerá exatamente como você o projetou.