Layout automático no Zero Block

Para ativar o Auto Layout, acesse as configurações de Grupo. Certifique-se de que os elementos agrupados estejam definidos como "Objeto" e não como grupo "Lógico". Quando a opção "Object" for selecionada em Group, a seção Auto Layout será exibida abaixo.

Na seção Auto Layout, escolha "Auto" para a configuração Flex. A ativação do Auto Layout fornece acesso a várias configurações que controlam como os elementos reagem às alterações de conteúdo ou tamanho e se alinham dentro do grupo de acordo. Vamos explorar essas configurações e aprender a personalizá-las.

Com o Auto Layout ativado, há duas novas configurações de Grupo que permitem gerenciar a largura e a altura do contêiner com elementos agrupados.

Por padrão, a opção Hug está selecionada, o que torna o tamanho do grupo flexível, ajustando-o com base no tamanho dos elementos dentro do contêiner e no espaçamento entre eles.

Se você redimensionar manualmente o grupo ou definir uma largura ou altura personalizada, a opção Hug mudará automaticamente para Fixed. A opção Fixed significa que o tamanho do grupo é personalizado e não será afetado, mesmo que você altere o espaçamento entre os elementos ou o tamanho deles.

Você pode notar que há outra configuração Hug disponível. Quando ativada, ela recalcula os valores de largura e altura e os define como o mínimo possível para que todos os elementos se encaixem perfeitamente, considerando seu tamanho e o valor definido na configuração Gap (que controla o espaçamento). Se você redimensionar os elementos, o Hug ajustará automaticamente a largura ou a altura de acordo.

A configuração Direction (Direção) controla o alinhamento dos elementos dentro do grupo. Você tem três opções aqui: Horizontal, Vertical e Wrap (mover para a próxima linha).

Quando a direção Horizontal for selecionada, todos os elementos serão alinhados ao longo do eixo X. Isso é ideal para organizar elementos em uma linha, como ícones, itens de menu ou botões.

Quando a direção Vertical for definida, todos os elementos do grupo serão alinhados ao longo do eixo Y. Isso é particularmente útil ao projetar listas ou elementos de cartão empilhados um abaixo do outro.

Quando a direção Wrap é escolhida, os elementos são alinhados em uma linha com base na largura do contêiner. Se um elemento for muito largo para caber, ele será movido para a próxima linha. Isso pode ser especialmente útil para galerias de fotos, nuvens de tags com várias linhas e para tornar os sites responsivos em diferentes resoluções de tela.

A configuração Gap controla o espaçamento entre os elementos dentro do grupo de acordo com a direção escolhida. Para o alinhamento horizontal, ela ajusta o espaço do eixo X, enquanto para o alinhamento vertical, ela altera o espaço do eixo Y. Quando a direção Wrap é definida, você pode especificar espaços para ambos os eixos.

Observe que, se a opção Hug estiver ativada para a direção escolhida, o ajuste de Gap poderá afetar a largura ou a altura do contêiner.

A configuração Alinhar elementos ajusta o alinhamento dos elementos em um grupo ao longo do eixo principal - vertical ou horizontalmente - com base na direção escolhida.

Por exemplo, quando a direção Horizontal é selecionada, os elementos são alinhados verticalmente ao centro, à parte superior ou à parte inferior do contêiner. Por outro lado, se a direção Vertical for escolhida, os elementos serão alinhados horizontalmente ao centro, à esquerda ou à direita do contêiner. Entretanto, se a opção Hug estiver ativada e todos os elementos tiverem a mesma largura ou altura, o alinhamento não será alterado.

A configuração Justify Content (Justificar conteúdo) oferece opções alternativas de alinhamento, usando um eixo diferente daquele usado em Align Elements (Alinhar elementos). Essa configuração está disponível somente quando a opção Abraço não está selecionada para a largura ou altura ao longo do eixo.

Além do alinhamento básico central ou lateral, há também opções de alinhamento inteligente disponíveis:

A opção Espaço entre distribui uniformemente os elementos dentro do grupo, sem espaço em branco entre eles e o contêiner.

A opção Space Around (Espaço ao redor ) distribui os elementos uniformemente dentro do grupo, garantindo que a distância entre os elementos e o contêiner seja a metade do espaçamento entre os elementos.

A opção Space Evenly (Espaço uniformemente ) distribui os elementos uniformemente dentro do grupo, garantindo que a distância entre os elementos e o contêiner seja igual ao espaçamento entre os elementos.

A configuração Alinhar conteúdo organiza os elementos dentro do grupo e está disponível somente quando a direção Wrap está selecionada e há várias linhas de conteúdo. Ela alinha verticalmente todas as linhas ao contêiner, a menos que Hug esteja selecionado.

Com Align Content (Alinhar conteúdo), você pode alinhar as linhas normalmente ao centro ou às laterais. De forma semelhante à configuração anterior, você também pode escolher uma das opções de alinhamento inteligente: Space Between (que distribui uniformemente os elementos sem nenhum espaçamento do contêiner), Space Around (que distribui uniformemente os elementos com uma distância do contêiner igual à metade do espaçamento entre os elementos) e Space Evenly (que distribui uniformemente os elementos com uma distância do contêiner igual ao espaçamento entre os elementos).