Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Web Development
Webdesign

Execícios na Flexbox: Componentes Web Simples

by
Difficulty:BeginnerLength:ShortLanguages:

Portuguese (Português) translation by Erick Patrick (you can also view the original English article)

Nesse tutorial, praticaremos a construção de componentes web em dois exercícios:  usaremos a Flexbox para construir componentes de "lista de miniaturas" e "barra lateral".

Flex

Caso não saiba, "Layout Flexível" (Flexbox) é um recurso do CSS que provê uma forma eficiente de estruturar, alinhar e ordenar itens num container. Junto da Grade e outras especificações, temos um módulo de layout mais completo como resposta para as flutuações, tabelas e outros hacks que designers web tem usado pelos anos.

Com Flexbox, itens podem ser posicionados em qualquer direção e ajustar seus tamanhos, seja crescendo para preencher o espaço ou diminuindo para não estourar o elemento pai.

Exercício 1: Componente de Lista de Miniaturas

Usamos listas para mostrar informações, como listas de músicas, detalhes de usuário ou filmes. Geralmente, esses listas contém imagens conhecidas como "miniaturas". Alinhar imagens no modo tradicional é complicado e inconsistente, mas com Flexbox, estilizamos um componente de lista com o mínimo de CSS.

Para esse componente, usemos o elemento <ul> com itens de lista <li>:

Usaremos Flexbox para criar o layout de .list-item, dando a cada um dois elementos filhos diretos.

how flex-grow and flex-shrink behave
como flex-shrink e flex-grow se comportam

Essa imagem mostra como flex-shrink e flex-grow se comportam. O item .list-item__image nunca encolhe e .list-item__content ocupa o espaço restante no container li.

Essa será a estrutura HTML de cada um:

E o CSS básico será algo assim:

Eis o que os estilos básicos nos dão:


Veremos avatares posicionados à esquerda e os detalhes à direita.

Usamos detalhes de usuário do randomuser.me. Ao adicionar estilos extras (estilo do container, raio de borda nas imagens, tipografia, cores de fundo), obtemos isso:

Podemos ver o CSS completo no CodePen e brincar com ele. Por exemplo, se movermos .list-item__image depois de .list-item__content no HTML, teremos uma lista de miniaturas com imagens à direita sem usar qualquer classe ou estilo adicional.

Exercício 2: Componente de Barra Lateral

Vários sites e aplicações web usam uma barra lateral para navegação. Nesse exercício construiremos um componente de barra lateral reusável usando Flexbox.

O layout contém três partes principais:

  1. marcador de logo
  2. navegação
  3. bloco do perfil de usuário

Tipicamente, a parte complicada de criar esse tipo de layout é posicionar o bloco do perfil ao final da barra lateral.

Usando Posicionamento

Com a solução "tradicional", assumimos que a altura do perfil do usuário será de 70px. Então damos 70px de espaçamento no final da barra lateral para posicioná-lo. Mas se tivermos um redesign e a caixa do perfil mudar de altura? Ou decidimos colocá-la no topo? Nesses casos, precisamos criar classes adicionais para a barra lateral ou modificar estilos atuais. Nenhuma delas é ideal.

O Jeito Flexbox

Com Flexbox resolvemos esse problema sensatamente. Usaremos a mesma técnica usada no componente miniatura mas com uma leve diferença. Mudaremos a direção de horizontal para vertical com flex-direction: column;.

As partes do topo e do fundo do componente continuam não encolhendo. O elemento central, .sidebar_nav, preencherá o resto do espaço graças a flex-grow: 1;.

Então, eis o HTML:

E nosso estilo básico:

Para recapitular: o componente .sidebar tem flex-direction: column que transformará o fluxo dos elementos filhos de horizontal para vertical.

.sidebar__nav tem a propriedade flex-grow: 1 que a fará ocupar todo o espaço disponível no container e empurarrá .sidebar__profile para o fundo da barra lateral.

Com essa abordagem, não precisamos nos preocupar com a altura do perfil. Então, o que teremos?

Esse é o resultado final da barra lateral com estilos adicionais, incluindo alguns ícones da Fontawesome.

Conclusão

Flexbox mudou a forma como pensamos sobre layout na web e, felizmente, é suportada em todos os navegadores modernos. Nesse tutorial, usamos algumas de suas propriedades, mas há muitas outras como se pode imaginar. No próximo tutorial "Exercícios na Flexbox", construiremos mais componentes intermediários, cobrindo mais recursos da Flexbox.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.