Web design responsivo usando o Flexbox | Explicado

Um design responsivo da web é referido como um design que altera seu layout, dependendo do ambiente em que está sendo usado. Por meio do ambiente, queremos dizer que o comportamento do site mudará com base no tamanho da tela do dispositivo, largura, resolução, orientação, etc. Existem muitas maneiras de tornar seu site responsivo, como consultas de mídia, grade, flexbox, etc. O foco desta redação será em como tornar seu design de web responsivo usando o Flexbox.

Web design responsivo usando o Flexbox

CSS Flexbox é um modelo de layout que permite um arranjo eficiente e dinâmico de elementos. Este layout é unidimensional e permite a colocação de elementos dentro de um recipiente com espaço igualmente distribuído.

Isso torna os elementos responsivos, o que significa que os elementos mudam seu comportamento de acordo com o tipo de dispositivo que os exibe. Além disso, torna os elementos flexíveis e fornecem a posição apropriada e simetria.

Um Flexbox possui dois componentes, que são contêineres flexíveis e item flexível. Um contêiner Flex descreve as propriedades do elemento ancestral, enquanto um item flexível define as propriedades dos elementos sucessores. Cada um desses componentes utiliza várias propriedades para implementar uma caixa flexível.

Aqui, apresentaremos vários layouts responsivos que você pode criar para diferentes dispositivos usando o Flexbox.

Como criar um bar de naval responsivo usando o Flexbox?

Aqui vamos demonstrar como você pode fazer uma barra de navegação responsiva usando o layout de uma coluna para dispositivos como telefones celulares, tablets, etc, que têm um tamanho de tela pequeno e um layout de duas colunas para dispositivos como computadores, laptops, etc. que têm tamanhos de tela maiores.

Aqui está uma representação visual de um layout de uma coluna para tamanhos de tela pequena.

O diagrama abaixo mostra o layout de duas colunas para tamanhos de tela maiores.

Agora vamos para o código.

Html

Lar
Serviço
Sobre

No código acima, criamos uma caixa flexível aninhando três recipientes de div em um contêiner Div maior.

CSS

.Flex-container
exibição: flex;
Direcção flexível: coluna;
Size da fonte: 25px;
Alinhamento de texto: centro;
Fonte-família: Verdana, Genebra, Tahoma, Sans-Serif;

Usando a classe atribuída à div maior, estamos definindo sua tela para flexionar e depois dar uma direção usando o valor da coluna da propriedade Direção de fluxo e depois estilizar nossa div com CSS básico.

CSS

.Nav1
Background-Color: DarkGray;
preenchimento: 15px;
Flex: 50px;

.NAV: Passe o mouse
Background-Color: LightGray;

Aqui estamos simplesmente estilizando nossas colunas de marinho, fornecendo a eles algumas cores, preenchimento e comprimento inicial usando a propriedade Flex e definindo algum estilo no pau do link de navegação.

CSS

@media (largura min: 768px)
.Flex-container
Direcção flexível: Linha;

A consulta acima afirma que, quando a largura de um determinado dispositivo é 768px ou mais largo, a direção do layout mudará de um layout de uma coluna para duas colunas.

Saída

Quando a largura é 767px ou menos.

Quando a largura é 768px ou mais larga.

Um barbar responsivo foi gerado com sucesso.

Como criar uma grade de imagem responsiva usando o Flexbox?

Aqui está como você pode criar uma galeria responsiva que muda seu comportamento de acordo com a janela do navegador.

Html

Aqui criamos um recipiente de div e aninhados mais dois contêineres de div dentro dele. Ambos os recipientes aninhados ninham ainda mais três imagens cada.

CSS

.contêiner
exibição: flex;
FLEX-WRAP: WRAP;
preenchimento: 5px;

A div com a classe "contêiner" está sendo exibida como uma caixa flexível e recebeu certos preenchimentos. Além disso, a propriedade Flex-Wrap é atribuída valor a embrulho, o que significa que, se necessário, as imagens serão embrulhadas dentro do contêiner.

CSS

.colunas img
largura: 100%;

.colunas
flex: 30%;
Máxia de largura: 30%;
preenchimento: 5px;

As imagens receberam 100% de largura para que se encaixem adequadamente no recipiente, além de usar o flex e a largura máxima, estamos criando duas colunas que serão colocadas próximas uma da outra.

CSS

@media (max-width: 600px)
.colunas
flex: 50%;
MAX-LUDA: 50%;

A consulta da mídia especifica que, se a largura for menor que o número especificado, a duas colunas será convertida em uma.

Saída

Quando a largura é 600px, ou mais largo.

Quando a largura é 600px, ou menos.

Uma galeria de imagens responsivas foi criada.

Conclusão

Um design de web responsivo pode ser criado usando várias propriedades do Flexbox, como direção flexível, fluxo flexível, wrap flex, etc. além de especificar certas consultas de mídia. A consulta de mídia deve especificar o tipo e os recursos de um dispositivo de acordo com o qual o web design alterará sua aparência em vários dispositivos. No artigo acima, demonstramos alguns layouts que você pode criar usando várias propriedades do FlexBox, juntamente com consultas de mídia.