O poder incrível da Flexbox

Sep 11, 2025

Como

Flexbox, ou o layout de caixa flexível, é um poderoso módulo de layout CSS que fornece designers e desenvolvedores de web uma maneira eficiente e simples de colocar, alinhar e distribuir elementos em um contêiner. Isso resolve muitos problemas de layout que temos lutado para resolver há muito tempo.

FlexBox Basics.

Em sua forma mais básica, a Flexbox é composta de dois elementos: um contêiner flexível (ou pai flex) e itens flexíveis (flexões flexíveis). Um recipiente flexível é um elemento contendo (como um divã ) Dada a propriedade de exibição flex. . Itens Flex são elementos filho de um contêiner flexível, que pode ser manipulado através de várias propriedades de exibição.

Os contêineres flexos e itens flexões têm seu próprio alcance de propriedades que podem ser combinadas de maneiras diferentes para criar uma gama de layouts complexos. Itens dentro de um recipiente flexível podem ser estabelecidos horizontalmente ou verticalmente, alinhados e distribuídos de várias maneiras, e esticados ou encolhidos para se adequar ao espaço disponível. Todas essas opções permitem que você crie facilmente layouts responsivos.

Como usar o Flexbox

Para começar a usar o Flexbox, você precisa primeiro criar seu contêiner flexível (o elemento pai que conterá seus itens flexíveis). Neste exemplo, usaremos um divã quadra. Antes de estilamos o elemento, vamos adicionar mais três divã Blocos dentro do nosso contêiner flexível para atuar como os itens flexíveis. Neste ponto, os itens serão empilhados.

Com nossos divs filhos no lugar, podemos definir a propriedade de exibição do contêiner pai para flex. .

 Recipiente flexível {
Exibir: flex;
}

Instruções de layout

A direção de layout é simplesmente a direção que seus elementos se distribuirão. A direção padrão de um recipiente flexível é fileira , que exibirá os elementos da criança horizontalmente. Você pode alternar o layout para vertical, definindo a direção para coluna .

 Recipiente flexível {
Exibir: flex;
Flex-Direção: linha;
}

Contêiner flexível {
Exibir: flex;
Direção Flex: Coluna;
}

Qualquer direção que você definiu no seu contêiner flexível é referida como sua direção 'principal', enquanto a outra direção você não escolheu se torna a direção 'cruz'. Assim, por padrão, a direção principal será horizontal e a direção transversal será vertical.

Flexbox também permite que você inverta o layout. Quando invertido, as crianças de um recipiente flexível serão estabelecidas à direita para a esquerda (se a direção for fileira ) ou inferior para cima (se a direção é coluna ).

 Recipiente flexível {
Exibir: flex;
Direção Flex: Row-Reverse;
}

Contêiner flexível {
Exibir: flex;
Flex-Direção: coluna-reversa;
}

Isso pode ser útil se você quiser inverter o layout em telas menores.

Por exemplo, digamos nas telas de desktop que você deseja exibir texto no lado esquerdo da tela e uma imagem à direita (veja a imagem da prancha acima). No celular, isso moveria a imagem abaixo do texto. Ao inverter a direção, você pode garantir que a imagem apareça acima do texto.

Ajuste o alinhamento

As configurações do Flexbox também fornecem dois métodos diferentes para alinhar conteúdo: verticalmente e horizontalmente. Aqui estão as suas opções de alinhamento horizontal para itens dentro de um contêiner flex:

Flex-Start. : Itens definidos para o início da linha (esquerda, a menos que você tenha revertido o layout)

Centro : Itens centrados dentro da linha

Flex-End : Itens definidos para o final da linha (direita, a menos que você tenha revertido o layout)

espaço entre : Itens distribuídos uniformemente ao longo da linha

espacial : Itens distribuídos uniformemente ao longo da linha, com espaço igual em ambos os lados de cada elemento

Então o código pode se parecer com isso:

 Recipiente flexível {
Exibir: flex;
Flex-Direção: linha;
Alinhar-Conteúdo: Flex-Start | flex-end | centro | espaço-entre | espaço-ao redor | esticar;
}

Aqui estão as suas opções de alinhamento vertical para itens em um contêiner flex:

Flex-Start. : Itens alinhados ao topo da linha

Centro : Itens são centrados dentro da linha

Flex-End : Itens alinhados à parte inferior da linha

esticar : Itens esticado pela altura da linha

linha de base : Itens alinhados às suas linhas de base (a linha imaginária que o texto se senta)

O código pode ficar assim:

 Recipiente flexível {
Exibir: flex;
Flex-Direção: linha;
alinhar-artigos: flex-start | flex-end | centro | linha de base | esticar;
}

Por padrão, as crianças de um contêiner flexível sempre tentarão caber em uma única linha. Se você quiser alterar isso, você pode adicionar o embrulho atributo. Isso permite que as crianças envolvam uma nova linha se ficarem sem espaço.

 Recipiente flexível {
Exibir: flex;
Flex-Wrap: Enrole;
}

Itens Flex também recebem suas próprias propriedades baseadas em flex. Quando um elemento é colocado dentro de um recipiente flexível, ele se torna automaticamente uma criança flexível e é concedida seu próprio conjunto de estilos CSS baseados em flex. Estes estilos controlam dimensionamento, alinhamento e ordem de exibição.

Dimensionamento flexível

As crianças flexíveis podem alterar sua largura ou altura (dependendo da direção do layout do contêiner) para preencher o espaço disponível.

O WebFlow oferece três opções predefinidas para dimensionamento flexível: encolher, se necessário, preencher o espaço vazio e não encolher. Observe que cada elemento filho pode ter suas próprias configurações, o que permite uma infinidade de opções de design.

 item flexível {
Flex-shrink: & lt; número & gt ;;
Flex-crescer: & lt; número & gt ;;
Flex-Base: & lt; comprimento e gt; | auto;
}

Vamos dar uma olhada no que cada uma dessas opções faz:

Encolher, se necessário: Tamanhos o item com base em sua largura / altura ou seu conteúdo. O item não cresce maior do que precisa, mas pode encolher seu tamanho mínimo para evitar o estouro
Preencha o espaço vazio: Permite que o item se expanda para preencher todo o espaço disponível dentro de seu pai. Se você definir isso em todos os itens em um contêiner flexível, eles se expandirão para ocupar quantidades iguais de espaço vazio
Não encolha: Tamanhos o item com base em sua largura / altura ou seu conteúdo, mas não permite encolher, mesmo que isso possa causar transbordamento

Os itens do flex também podem ter suas próprias configurações de alinhamento, que substituem o conjunto de alinhamento padrão pelo seu contêiner Flex do pai. Esses alinhamentos se comportam como explicados anteriormente.

 item flexível {
Exibir: flex;
Flex-Direção: linha;
alinhar-artigos: flex-start | flex-end | centro | linha de base | esticar;
}

Por padrão, os itens flexionam na mesma ordem que aparecem no código-fonte. Com Flexbox, você pode substituir esse comportamento para garantir que os elementos exibam exatamente o pedido desejado.

As quatro opções principais que você pode usar aqui:

Auto : O valor padrão, que ordena itens à medida que estão na fonte
Primeiro : O item aparece primeiro em seu contêiner flexível
Último : Item aparece por último em seu contêiner flex
Personalizado : Você pode personalizar o pedido que seu item será exibido em

O pedido personalizado pode ser definido como um número, que especifica a ordem na qual o item Flex aparece dentro de um contêiner flexível.

 item flexível {
ordem: & lt; inteiro e gt ;;
}

Por que eu deveria usá-lo?

Estou feliz que você tenha perguntado! O uso do Flexbox permite criar facilmente layouts responsivos que já foram muito difíceis (ou impossíveis) para criar com os módulos de layout de CSS mais antigos.

Dê uma olhada nos exemplos da imagem abaixo - muitos dos quais você provavelmente já viu pela Web. Quase todos eles assumiriam uma quantidade considerável de CSS (especialmente em diferentes tamanhos de tela), mas apenas levam algumas linhas simples para alcançar com Flexbox. Para ver esses exemplos em ação, visite flexbox.webflow.com. .

O poder incrível da Flexbox

FlexBox Basics.

Como usar o Flexbox

Instruções de layout

Ajuste o alinhamento

Dimensionamento flexível

Por que eu deveria usá-lo?

Como - Artigos mais populares

Como baixar fotos do Instagram: Tudo que você precisa saber

Máscara de imagem de trabalho Magia com Houdini

Como criar um monstro de estilo de labirinto de panela

Como adicionar drama às suas obras de arte pastel

Como escolher a ferramenta de prototipagem correta

Faça um cartaz tipográfico usando Adobe InDesign

Descubra underpainting e como fazer melhor uso dele

Como nomear sua agência de web design

Categorias