O que é o Flex?

Flex é um novo jeito de fazer o design de seções e páginas. Ele se baseia numa nova tecnologia chamada edição inline e usa layouts flexíveis, como grade CSS, flex, alinhamento aprimorado e outros. O Flex usa pontos de interrupção para dar completa capacidade de resposta e total precisão a qualquer elemento.

O Flex se integra perfeitamente ao editor existente para que os usuários escolham quando e onde usá-lo. Assim, o Flex contém todos os mesmos benefícios do nosso editor, mas com muito mais recursos de design.

Adicione uma seção Flex

Para adicionar uma seção Flex:

1. Passe o cursor entre as linhas e clique no botão Adicionar seção. As seções aparecerão no painel lateral. Você também pode clicar com o botão direito do mouse para abrir o menu de contexto e depois clicar em Adicionar seção.
2. No painel lateral, clique em Seções Flex.
3. Clique na seção Flex a ser adicionada e, no topo da página, clique em Salvar.
4. O Modo Flex será aberto com a seção a ser editada.

Saiba mais em Adicione e edite uma seção Flex (1.0).

Modo Flex - visão geral

Painel Camadas

Localizado ao lado esquerdo do editor, o painel Camadas mostra os elementos da página (grades, widgets, flexboxes, caixas de texto e outros). Nele, você seleciona, reorganiza e troca o nome dos elementos. O painel Camadas é sempre iniciado com a seção, contendo as grades seguidas por widgets ou recipientes.

Além disso, você pode percorrer os elementos das seguintes formas:

• Selecione um elemento no ponto da grade até o elemento no menu que aparece acima.
  
• Clique na trilha de navegação acima do painel Design.

Painel Design

Localizado no lado direito do editor, o painel Design controla o design do elemento selecionado (recipiente, flexbox, widget). As opções de design são, entre outras, layout, ajuste de tamanho e alinhamento.

Medidas de tamanho no painel Design

O Flex oferece várias medidas de tamanho.

• Pixel (px). O tamanho fica igual em cada ponto de interrupção.
• Largura da viewport (vw). % da largura do elemento quando aparece numa determinada tela. 10 vw equivale a 10% da largura da viewport. 100 vw ocupa 100% da largura da tela. Como padrão, as margens e o tamanho dos widgets são medidos em %.
• Altura viewport (vh). % da altura do elemento quando aparece numa determinada tela. 10 vh equivale a 10% da altura da viewport no tamanho de cada tela.
• A. O tamanho é determinado automaticamente pelo conteúdo.
• Mín. e máx. A menor ou maior medida do elemento. Serve para limitar o ajuste do tamanho do elemento.

Alinhamento

Organizar

Você pode reorganizar objetos sobrepostos tanto no painel Design quanto no painel Camadas; basta arrastar um objeto para cima ou para baixo de outro.

Autoalinhamento x alinhamento do flexbox

No painel Design, o flexbox tem duas configurações de alinhamento automático diferentes.

• Em Layout, selecione layout Vertical ou Horizontal para criar um eixo para os elementos dentro do flexbox.
• Em Alinhar no flexbox, selecione como os elementos serão colocados no eixo.
  
• Em Alinhar, selecione como todo o flexbox será alinhado em relação à grade. Você só pode alinhar no eixo contrário.
  
• Em Alinhar, selecione onde o elemento dentro de um flexbox (como um botão) será alinhado no eixo do layout automático escolhido.
  

PIN

No painel Design, você pode fixar elementos em uma posição específica na célula, de modo que o local não mude em relação à célula quando o tamanho desta for alterado.

Para fixar um elemento em uma posição na célula:

1. Selecione o elemento e, no painel Design, role até Posição.
2. Ao lado de "Fixar", clique na seta correspondente ao local da célula onde o elemento será fixado.
   

O elemento ficará fixo nesse local da célula quando o tamanho da grade for alterado.

Ponto de interrupção

Ponto de interrupção é o tamanho ao qual o design se ajusta numa largura específica da tela. Com esses pontos, o design continua funcional à medida que aumenta ou diminui. No Flex, o padrão dos pontos de interrupção é:

• Desktop (1.025 px por 1.399 px)

• Desktop largo (a partir de 1.400 px)

• Tablet (768 px por 1.024 px)

• Celular (até 767 px)

• Paisagem no celular (468 px por 767 px)

Para trocar os pontos de interrupção, clique nas diferentes exibições no topo da página.

Você também pode ocultar certos elementos em pontos de interrupção específicos. Saiba mais sobre pontos de interrupção e como ocultar elementos em Pontos de interrupção no Flex (1.0).