O Flexbox (Layout de caixa flexível do CSS) é uma forma de organizar elementos em um contêiner (chamado de contêiner flexível). Os elementos do contêiner (chamados de itens flexíveis) podem aumentar ou diminuir para otimizar o espaço do contêiner, mantendo a ordem e o espaçamento especificados. O flexbox pode ser particularmente útil se você quiser alinhar itens de tamanhos diferentes em linhas ou colunas, com itens maiores ocupando mais espaço do que os menores.
Configurações do Flexbox
As configurações do flexbox podem ser encontradas no painel "Responsivo", na guia Flexbox.
Usar Flexbox
Para usar o Flexbox, marque a caixa de seleção Usar Flexbox. O elemento pai atual se torna o contêiner flexível, e as propriedades do Flexbox ficam disponíveis no painel "Responsivo".
O Flexbox não estará disponível se:
- O elemento pai atual é um elemento de texto como
<p>ou<h1>. - O elemento pai atual contém elementos inline, como
<span>ou<a>. Isso não se aplicará se o elemento pai for uma página.
Todos os elementos filhos diretos do contêiner flexível se tornam itens flexíveis. As camadas de guia não estão incluídas. Os itens flexíveis são organizados ao longo de um eixo principal, que pode ser definido como horizontal ou vertical. Também é possível configurar em que direção o conteúdo flui ao longo do eixo. Como a orientação e a direção do flexbox podem ser alteradas, as propriedades são definidas com valores como "flex-start" e "flex-end", em vez de cima, baixo, esquerda ou direita.
Direção
A direção determina como os itens flexíveis são organizados definindo o eixo principal e a direção do fluxo ao longo do eixo.
| Direção | Comportamento | Eixo principal |
|---|---|---|
| row | Os itens flexíveis são organizados em linhas, na direção do fluxo de texto, começando da esquerda em idiomas com orientação da esquerda para a direita, como o português. |
Horizontal |
| row-reverse | Os itens flexíveis são organizados em linhas na direção inversa do fluxo de texto, começando da direita em idiomas com orientação da esquerda para a direita, como o português. |
Horizontal |
| column | Os itens flexíveis são organizados em colunas, na direção do fluxo de conteúdo, geralmente começando de cima. |
Vertical |
| column-reverse | Os itens flexíveis são organizados em colunas, na direção inversa do fluxo de conteúdo, geralmente começando de baixo. |
Vertical |
Espaçamento
O espaçamento define se os itens flexíveis são espaçados automaticamente ou se são usadas distâncias fixas.
| Espaçamento | Comportamento |
|---|---|
| Padrão | Os itens flexíveis são organizados automaticamente no contêiner flexível de acordo com as configurações especificadas de justificação, wrapper e alinhamento. |
| Fixo | Os itens flexíveis são organizados de acordo com o espaçamento especificado do filho e do limite. |
Justificação
A justificação determina como os itens flexíveis são organizados ao longo do eixo principal. Essa configuração está disponível ao usar o espaçamento padrão.
| Justificação | Comportamento |
|---|---|
| flex-start | Os itens flexíveis são agrupados na borda inicial da linha ou coluna. |
| flex-end | Os itens flexíveis são agrupados na borda final da linha ou coluna. |
| center | Os itens flexíveis são centralizados ao longo do eixo principal. |
| space-between | Os itens flexíveis são espaçados de maneira uniforme ao longo do eixo principal, com os itens inicial e final nas bordas do contêiner. |
| space-around | Os itens flexíveis são espaçados de maneira uniforme ao longo do eixo principal, com metade do espaço em cada extremidade. |
| space-evenly | Os itens flexíveis são espaçados de maneira uniforme ao longo do eixo principal, com a mesma quantidade de espaço em ambos os lados dos itens inicial e final. |
Alinhamento entre eixos
O alinhamento entre eixos é como os itens flexíveis são organizados ao longo dos eixos da linha ou coluna atual.
| Alinhamento entre eixos | Comportamento |
|---|---|
| flex-start | Os itens flexíveis são posicionados na borda inicial do eixo cruzado. |
| flex-end | Os itens flexíveis são posicionados na borda final do eixo cruzado. |
| center | Os itens flexíveis são centralizados ao longo do eixo cruzado. |
| stretch | Os itens flexíveis são esticados para preencher o espaço disponível ao longo do eixo cruzado. |
| baseline | Os itens flexíveis são colocados ao longo do eixo cruzado para que os respectivos valores de referência fiquem alinhados. |
Quebra
O wrapper determina se o conteúdo é unido ao contêiner. Essa configuração está disponível ao usar o espaçamento padrão.
| Quebra | Comportamento |
|---|---|
| nowrap | Os itens flexíveis são organizados em uma única linha ou coluna. |
| wrap | Os itens flexíveis podem se ajustar para formar várias linhas ou colunas quando são muito grandes para caber em uma única linha. |
| wrap-reverse | Os itens flexíveis podem se ajustar para formar várias linhas ou colunas quando são muito grandes para caber em uma única linha. A direção do eixo cruzado é invertida. |
Alinhamento da quebra
O alinhamento da quebra define como as linhas ou colunas são organizadas ao longo do eixo cruzado (que é perpendicular ao eixo principal) quando há várias linhas ou colunas no contêiner flexível. Esta configuração está disponível quando o espaçamento padrão é usado e a quebra está ativada.
| Alinhamento da quebra | Comportamento |
|---|---|
| flex-start | As linhas ou colunas são agrupadas no início da borda do contêiner. |
| flex-end | As linhas ou colunas são agrupadas no final da borda do contêiner. |
| center | As linhas ou colunas são centralizadas ao longo do eixo cruzado. |
| stretch | As linhas ou colunas são esticadas para preencher o espaço disponível ao longo do eixo cruzado, a menos que tenham uma altura definida. |
| space-between | As linhas ou colunas são espaçadas de maneira uniforme ao longo do eixo cruzado, com as linhas e as colunas iniciais e finais nas bordas do contêiner. |
| space-around | As linhas ou colunas são espaçadas de maneira uniforme ao longo do eixo cruzado, com metade do espaço nas duas extremidades. |
Espaçamento dos filhos
É a distância em pixels mantida entre dois itens no contêiner flexível. Essa configuração está disponível ao usar o espaçamento fixo.
Espaçamento dos limites
A distância em pixels mantida entre os itens externos e o contêiner flexível. Essa configuração está disponível ao usar o espaçamento fixo.
Ordem dos filhos
Os elementos contidos no flexbox são listados aqui. Para fazer a reordenação, arraste os itens para a nova posição na lista.
Também é possível mover os itens flexíveis no cenário para fazer o reordenamento.
Propriedades filhas do Flexbox
Os itens flexíveis têm as próprias propriedades. Selecione o filho para ver e editar as configurações do Flexbox.
Embora os itens flexíveis possam aumentar ou diminuir de tamanho, eles respeitam as larguras e alturas mínima e máxima. As propriedades à esquerda e na parte superior estão desativadas, já que os itens flexíveis são organizados de acordo com as configurações do flexbox, mas as propriedades de tradução podem ser usadas para compensar as posições.
Alinhamento entre eixos
O alinhamento entre eixos de um item flexível modifica o alinhamento entre eixos padrão definido para o contêiner.
| Alinhamento entre eixos | Comportamento |
|---|---|
| auto | O item flexível usa a configuração de alinhamento entre eixos para o contêiner flexível. |
| baseline | O valor de referência do item flexível é alinhado aos valores de referência de outros itens flexíveis com alinhamento de referência. |
| center | O item flexível é posicionado no centro do eixo cruzado. |
| flex-end | O item flexível é posicionado ao longo do eixo cruzado no final da borda do contêiner. |
| flex-start | O item flexível é posicionado ao longo do eixo cruzado no início da borda do contêiner. |
| stretch | O item flexível é esticado para preencher o contêiner ao longo do eixo cruzado, a menos que tenha uma altura definida. |
Crescimento do flexbox
O fator de crescimento flexível determina quanto o item flexível vai aumentar para preencher o espaço disponível no contêiner flexível ao longo do eixo principal em proporção aos fatores de crescimento flexível de outros itens na mesma linha ou coluna. Essa configuração está disponível ao usar o espaçamento padrão.
Por exemplo, se uma linha tem três itens flexíveis com fatores de crescimento flexíveis: 1, 1 e 2, o último item flexível ocupa duas vezes mais espaço disponível na linha do que todos os outros itens flexíveis.
Se o total de todos os fatores de crescimento flexível para os itens em uma linha ou coluna for menor que 1, talvez os itens flexíveis não usem todo o espaço disponível.
Quando o fator de crescimento flexível é 0, o item flexível não aumenta.
Redução do flexbox
O fator de redução flexível determina quanto o item flexível diminui para caber no contêiner flexível ao longo do eixo principal. Isso é proporcional aos fatores de redução flexível de outros itens na mesma linha ou coluna. Essa configuração está disponível ao usar o espaçamento padrão.
Por exemplo, se uma linha tiver três itens flexíveis com fatores de redução flexíveis de 1, 1 e 2, o último item diminuirá em relação aos outros itens flexíveis. Os fatores de redução flexíveis consideram o tamanho do item flexível.
Quando o fator de redução flexível for 0, o item flexível não vai ser reduzido.