Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. CSS
Webdesign

Como construir um layout de site de notícias com Flexbox

by
Difficulty:IntermediateLength:ShortLanguages:

Portuguese (Português) translation by Ícaro Heimig (you can also view the original English article)

Final product image
What You'll Be Creating

Não é necessário entender todos aspectos do Flexbox antes que você possa pular e começar. Neste tutorial, vamos apresentar algumas características do Flexbox enquanto estamos criando um "layout de notícias" como o que você pode encontrar no The Guardian.

A razão para você estar usando Flexbox é que isso te dá algumas características muito poderosas:

  • Nós podemos facilmente fazer colunas responsivas
  • Nós podemos fazer colunas com alturas iguais
  • Nós podemos puxar o conteúdo para a base(bottom) de um container

Então vamos começar!

1. Comece com duas colunas

Criar colunas no CSS tem sempre sido um desafio. Por muito tempo, as únicas opções eram usar floats ou tables, mas ambos tinham seus próprios problemas.

Flexbox torna o processo mais simples, nos dando:

  • código limpo: nós só vamos precisar de um container com display: flex
  • Não há necessidade de limpar os floates, impedindo comportamentos de layout inesperados
  • markup semântico
  • flexibilidade: nós podemos redimensionar, esticar, alinhar as colunas com poucas linhas de CSS

Vamos começar fazendo duas colunas; uma que tenha 2/3 da largura do nosso container e, outra, que tenha 1/3.

Existem dois elementos aqui:

  1. o container columns
  2. dois column filhos, um com uma classe adicional de main-column que nós vamos usar para torná-la mais larga

Como a coluna principal tem como valor flex de 2, ela vai assumir duas vezes mais espaço que a outra coluna.

Adicionando alguns estilos visuais extras, eis o que temos:

2. Tornar cada coluna um container Flexbox

Cada uma dessas duas colunas vão conter diversos artigos empilhados verticalmente, então nós vamos transformar os elementos column em containers Flexbox também. Nós queremos:

  • que os artigos sejam empilhados verticalmente
  • que os artigos estiquem e preencham o espaço disponível

A regra flex-direction: column no container, combinados com a regra flex:1 nos filhos garantem que os artigos(articles) vão preencher todo espaço vertical, mantendo as nossas duas primeiras colunas com a mesma altura.

3. Fazer de cada aticle um container Flexbox

Agora, para nos dar um controle extra, vamos transformar cada artigo em um container Flexbox também. Cada um deles vai conter:

  • um título
  • um parágrafo
  • uma barra de informações com o autor e o número de comentários
  • uma imagem responsiva opcional

Nós estamos usando Flexbox aqui para "puxar" a barra de informações para a base do container. Como um lembrete, esse é o layout do artigo que estamos almejando:

Aqui está o código:

Os elementos articles são dispostos verticalmente graças a regra flex-direction: column;.  

Nós aplicamos flex: 1 para o elemento article-content então ele preenche o espaço vazio, e "puxa" o article-info para a base, não importa a altura das colunas.

4. Adicionar algumas colunas aninhadas

Na coluna da esquerda, o que nós realmente queremos é outro conjunto de colunas. Então nós vamos trocar o segundo article com o mesmo container columns que nós já usamos

Como queremos que a primeira coluna aninhada seja mais ampla, estamos adicionando uma classe nested-column com o estilo adicional:

Isso vai fazer nossa nova coluna duas vezes mais larga que as outras.

5. Dar ao primeiro article um layout horizontal

Esse primeiro article é bem grande. Para otimizar o uso do espaço, vamos trocar o seu layout para ser horizontal.

A propriedade order é muito útil aqui, já que ela nos permite alterar a ordem dos elementos HTML sem afetar o markup HTML. O article-image na verdade vem antes do article-body na marcação, mas ele se comportará como se viesse depois.

6. Tornar o layout responsivo

Isso tudo está aparecendo como nós queremos, embora esteja um pouco esmagado. Vamos consertar isso transformando em responsivo.

Uma das grandes características do Flexbox é que você precisa apenas remover a regra display:flex no container para desabilitar o Flexbox completamente, enquanto todas as outras propriedades do Flexbox (como align-items ou flex) continuam válidas.

Como resultado, você pode acionar um layout "responsivo", habilitando Flexbox somente acima de um certo breakpoint.

Nós vamos remover o display:flex de ambos seletores .columns e .column ao invés de colocar dentro de uma media query:

É isso! Em telas menores, todos os articles vão estar no topo um do outro. Acima de 800px, eles vão se dispor em duas colunas.

7. Adicionar toques finais

Para tornar o layout mais atraente em telas maiores, vamos fazer alguns ajustes no CSS:

O primeiro artigo tem seu conteúdo disposto horizontalmente, com o texto à esquerda e a imagem à direita. E também, a coluna principal agora é mais larga(75%) e a coluna aninhada também (66%). Aqui está o resultado final!

Conclusão

Eu espero que eu tenha mostrado que você não precisa entender cada um dos aspectos do Flexbox para se jogar e começar a usá-lo! Esse layout de notícias responsivo é um padrão realmente útil; brinque com ele, deixe-nos saber como você chegou lá!

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.