Site avançado: Alinhamento e espaçamento flexíveis

No Flexbox, você pode economizar tempo alinhando vários elementos dentro da mesma seção, coluna ou flexbox simultaneamente.

Para alinhar vários elementos:

1. Selecione a seção, coluna ou flexbox e clique no ícone de alinhamento () no menu flutuante.
2. Selecione o alinhamento desejado.

O painel de design oferece opções adicionais de alinhamento, como alterar a direção do layout automático, esticar e muito mais.

Para alinhar vários elementos do painel de design:

1. Clique com o botão direito do mouse na seção, coluna ou flexbox desejada e selecione Editar design.
2. Na seção Layout do painel de design, em Alinhar elementos, selecione o alinhamento vertical e horizontal desejado para o conteúdo.

Embora seja possível alinhar vários elementos ao mesmo tempo, às vezes você só precisa alterar o alinhamento de um elemento dentro de uma coluna flexível sem afetar os outros elementos.

Para alinhar um único elemento:

1. Selecione o elemento desejado.
2. No menu flutuante, clique no ícone de alinhamento () e selecione o alinhamento desejado. Ou, clique com o botão direito do mouse no elemento e selecione Editar design. Isso abrirá o painel de design, onde você poderá selecionar o alinhamento na seção Alinhar.

Você pode definir a quantidade de espaço horizontal ou vertical entre colunas dentro da mesma seção flexível ou widgets dentro de uma coluna, flexbox ou grade avançada.

Para definir o espaçamento entre os elementos:

1. Clique com o botão direito do mouse na seção, coluna, flexbox ou grade avançada desejada e selecione Editar design.
2. Na seção Espaçamento do painel de design, em Espaçamento entre elementos, digite ou use o controle deslizante para definir o valor percentual do espaço horizontal ou o valor em pixels do espaço vertical que você deseja entre os elementos no campo Espaçamento entre itens.