Como usar o Flex para tornar seu site mais responsivo

Os designs de sites modernos precisam ser responsivos às mudanças no conteúdo ou no tamanho do navegador. Você pode conseguir isso usando CSS vanilla, consultas de mídia ou flexbox.

Certas propriedades flexíveis, como flex-wrap ou flex-grow, podem alterar o tamanho ou a localização de um elemento de maneira visualmente atraente. Este artigo apresentará exemplos de como você pode usar as propriedades flex-grow, flex-shrink, flex-wrap, flex-flow e order flex.

Como configurar a exibição CSS Flex

Se você não está familiarizado com o básico do flexbox, você pode explorar isso Fragmento de CodePen. Inclui código de exemplo para uma configuração simples de flexbox. Primeiro, você precisará agrupar os itens filho em um div pai ou "contêiner flexível".

<classe div="pai">
<classe div="item-filho"></div>
<classe div="item-filho"></div>
<classe div="item-filho"></div>
</div>

Adicione o exibição: flexível propriedade para a div pai.

.pai {
 exibição: flexível;
}

Como crescer itens dentro de um contêiner

o flex-grow

A propriedade permite que os itens filho se expandam para preencher o espaço disponível em seu div pai. Esta propriedade permite especificar a quantidade de espaço que cada item de caixa pode ocupar.

Para adicionar flex-grow, adicione a propriedade CSS flex-grow a cada um dos itens filhos.

<classe div="pai">
<estilo div="cor de fundo: vermelho; flex-grow: 1"></div>
<estilo div="cor de fundo: laranja; flex-grow: 1"></div>
<estilo div="cor de fundo: amarelo; flex-grow: 1"></div>
<estilo div="cor de fundo: verde; flex-grow: 3"></div>
<estilo div="cor de fundo: azul; flex-grow: 1"></div>
</div>

.pai {
 largura: 500px;
 exibição: flexível; 
}

Um flex-grow de 0 para cada item significa que as caixas não serão expandidas para preencher o espaço de seu pai. 0 é o valor padrão para esta propriedade.

Um flex-grow de 1 para cada item forçará todas as caixas a se expandirem igualmente para caber no espaço disponível dentro do pai.

Se um dos itens teve um flex grow maior, por exemplo:

<estilo div="cor de fundo: verde; flex-grow: 3"></div>

A caixa verde tentará ganhar até três vezes a quantidade de espaço que as outras caixas.

Veja o código para a propriedade flex-grow neste Fragmento de CodePen para ver um exemplo de trabalho.

Como reduzir itens dentro de um contêiner

Em alguns casos, a largura do pai pode diminuir e os itens dentro do pai não cabem mais nele. Você pode usar o flex-shrink propriedade para diminuir o tamanho das caixas. Dessa forma, eles podem ficar contidos dentro do pai.

Flex-shrink permite que você especifique uma proporção de quanto cada item deve encolher.

Adicione a propriedade flex-shrink aos itens div filho. Altere as larguras do pai e dos filhos para que os itens não caibam no contêiner.

<classe div="pai">
<estilo div="cor de fundo: vermelho; flex-shrink: 1"></div>
<estilo div="cor de fundo: laranja; flex-shrink: 1"></div>
<estilo div="cor de fundo: amarelo; flex-shrink: 1"></div>
<estilo div="cor de fundo: verde; flex-shrink: 2"></div>
<estilo div="cor de fundo: azul; flex-shrink: 1"></div>
</div>

.pai {
 largura: 500px;
 exibição: flexível; 
}
.pai div {
 largura: 150px;
 altura: 150px;
}

Um flex-shrink de 1 para todos os itens significa que todos os itens encolherão igualmente se a largura do pai for reduzida.

Se um dos itens tiver um flex-shrink maior, por exemplo:

<estilo div="cor de fundo: verde; flex-shrink: 2"></div>

A caixa verde tentará encolher duas vezes mais que as outras caixas.

Veja o código para a propriedade flex-shrink neste Fragmento de CodePen para ver um exemplo de trabalho.

Como empurrar itens para a próxima linha

o envoltório flexível A propriedade permite que você envie itens para a próxima linha se eles não couberem na largura do contêiner pai. Aqui, os itens não encolhem e você poderá preservar a altura e a largura dos itens.

As opções para a propriedade flex-wrap incluem:

flex-wrap: nowrap | embrulhar | wrap-reverse

Adicione a propriedade flex-wrap ao flex-container pai. Certifique-se de que a largura do recipiente seja pequena o suficiente para que não caiba os itens infantis dentro dele. Isso forçará todos os itens transbordando em uma nova linha.

<classe div="pai">
<classe div="vermelho"></div>
<classe div="laranja"></div>
<classe div="amarelo"></div>
<classe div="verde"></div>
<classe div="azul"></div>
</div>

.pai {
 largura: 300px;
 borda: preto sólido de 1px;
 exibição: flexível;
 flex-wrap: embrulhar;
}
.pai div {
 largura: 100px;
 altura: 100px;
}

O valor wrap posicionará os itens começando no canto superior direito do contêiner. O valor wrap-reverse reposicionará os itens para iniciar na parte inferior direita do contêiner. Ao embrulhar os itens, ele empurrará os itens em uma nova linha acima em vez de abaixo.

Se você especificar uma altura no contêiner pai, o contêiner adicionará espaçamento entre as linhas de itens.

Se você quiser remover esse espaçamento, mas manter a altura do div pai, use a propriedade align-content. Especifique a propriedade align-content como "flex-start" no div pai:

.pai { 
 largura: 300px; 
 altura: 300px;
 borda: preto sólido de 1px; 
 exibição: flexível;
 flex-wrap: embrulhar; 
 align-content: flex-começar;
}

A propriedade align-content é uma das várias propriedades do flexbox que permitem controlar o alinhamento.

Veja o código para a propriedade flex-wrap neste Fragmento de CodePen para ver alguns exemplos.

Como enviar itens para a próxima coluna

Se você estiver usando um layout diferente (como uma coluna) e ainda precisar que os elementos sejam agrupados, poderá usar o fluxo flexível propriedade. Esta propriedade flex é uma combinação das propriedades flex-wrap e flex-direction.

As combinações de opções de exemplo que você pode usar para a propriedade flex-flow incluem:

flex-wrap: linha nowrap | coluna nowrap | envoltório de linha | quebra de coluna | linha wrap-reverse | coluna wrap-reverse

Esta propriedade funciona de forma semelhante à propriedade flex-wrap acima. Adicione flex-flow ao contêiner flex pai. Certifique-se de que a largura do contêiner pai seja pequena o suficiente para forçar os itens filho a serem agrupados:

.pai {
 largura: 300px; 
 borda: preto sólido de 1px; 
 exibição: flexível; 
 fluxo flexível: quebra de coluna;
}
.pai div {
 largura: 100px;
 altura: 100px;
}

Os itens serão agrupados na direção especificada (linha ou coluna).

Veja o código para a propriedade flex-flow neste Fragmento de CodePen para ver alguns exemplos.

Como alterar a ordem dos itens

Se você precisar reorganizar os itens na página devido a qualquer tipo de dados dinâmicos, poderá usar o pedido propriedade flexível. Esta propriedade permite especificar a ordem em que cada item aparece.

Os números não precisam necessariamente começar em 1. Você pode usar qualquer número e intervalo, e a propriedade order ordenará os elementos HTML do menor para o maior.

Adicione a propriedade order a cada um dos itens dentro do contêiner flex pai:

<classe div="pai">
<classe div="vermelho" estilo="ordem: 2"></div>
<classe div="laranja" estilo="ordem: 1"></div>
<classe div="amarelo" estilo="ordem: 5"></div>
<classe div="verde" estilo="ordem: 4"></div>
<classe div="azul" estilo="ordem: 3"></div>
</div>

Nesse caso, a caixa laranja estará à direita, seguida pelas caixas vermelha, azul, verde e amarela.

Veja o código para a propriedade do pedido neste Fragmento de CodePen para ver alguns exemplos.

Experimentando mais propriedades CSS em seu site

Você pode usar essas propriedades flexíveis para tornar seu site mais responsivo. Isso inclui o uso das propriedades flex-grow, flex-shrink, flex-wrap, flex-flow e order flex.

Você também pode aprender sobre mais propriedades flexíveis para ajudá-lo a alinhar os elementos HTML em seu site.

Como usar o Flex para alinhar elementos HTML

Leia a seguir

Sobre o autor