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

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.

<div class="columns">
  <div class="column main-column">
    2/3 column
  </div>
  <div class="column">
    1/3 column
  </div>
</div>

Existem dois elementos aqui:

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

.columns {
  display: flex;
}

.column {
  flex: 1;
}

.main-column {
  flex: 2;
}

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:

Please accept marketing cookies to load this content.

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

.column {
  display: flex;
  flex-direction: column; /* Makes the articles stacked vertically */
}

.article {
  flex: 1; /* Stretches the articles to fill up the remaining space */
}

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.

Please accept marketing cookies to load this content.

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:

<a class="article first-article">
  <figure class="article-image">
    <img src="">
  </figure>
  <div class="article-body">
    <h2 class="article-title">
      <!-- title -->
    </h2>
    <p class="article-content">
      <!-- content -->
    </p>
    <footer class="article-info">
      <!-- information -->
    </footer>
  </div>
</a>

.article {
  display: flex;
  flex-direction: column;
}

.article-body {
  display: flex;
  flex: 1;
  flex-direction: column;
}

.article-content {
  flex: 1; /* This will make the content fill up the remaining space, and thus push the information bar at the bottom */
}

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.

Please accept marketing cookies to load this content.

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

<div class="columns">
  <div class="column nested-column">
    <a class="article">
      <!-- Article content -->
    </a>
  </div>

  <div class="column">
    <a class="article">
      <!-- Article content -->
    </a>
    <a class="article">
      <!-- Article content -->
    </a>
    <a class="article">
      <!-- Article content -->
    </a>
  </div>
</div>

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

1	.nested-column {
2	flex: 2;
3	}

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

Please accept marketing cookies to load this content.

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.

.first-article {
  flex-direction: row;
}

.first-article .article-body {
  flex: 1;
}

.first-article .article-image {
  height: 300px;
  order: 2;
  padding-top: 0;
  width: 400px;
}

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.

Please accept marketing cookies to load this content.

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:

@media screen and (min-width: 800px) {
  .columns,
  .column {
    display: flex;
  }
}

É 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:

@media screen and (min-width: 1000px) {
  .first-article {
    flex-direction: row;
  }

  .first-article .article-body {
    flex: 1;
  }

  .first-article .article-image {
    height: 300px;
    order: 2;
    padding-top: 0;
    width: 400px;
  }

  .main-column {
    flex: 3;
  }

  .nested-column {
    flex: 2;
  }
}

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!

Please accept marketing cookies to load this content.

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á!