CSS Flexbox #1. Criando seu primeiro layout Flexbox

No final de 2018, publicamos um livro sobre CSS Grid, a ferramenta de layout que está revolucionando o web-design frontend. CSS Grid é totalmente nativo do CSS e permite que você crie um sistema de layout baseado em grade, usando colunas e linhas.

"CSS Grid Explained" imediatamente se tornou um dos nossos livros mais vendidos. Então, estamos trabalhando em uma grande atualização e expansão para esse livro. Também estamos começando a produzir um novo livro, "Flexbox Explained". O Flexbox está intimamente relacionado ao CSS Grid, mas existem diferenças notáveis:

• Flexbox é um modelo de layout unidimensional. Ele pode gerenciar colunas ou linhas.
• CSS Grid é um modelo de layout bidimensional. Ele pode gerenciar colunas e linhas.

Nas próximas semanas, publicaremos uma série de tutoriais do Flexbox enquanto escrevemos "Flexbox Explained". Este primeiro tutorial demonstra os conceitos básicos do CSS Flexbox com exemplos práticos.

Introdução ao Flexbox

A especificação CSS Flexbox descreve um layout com itens ( flex-items ) dentro de um container ( flex-container ). Esses itens podem aumentar ou diminuir em largura e/ou altura, de acordo com o espaço disponível no contêiner. Os itens "flexionam" para caber no contêiner pai da melhor maneira possível.

Esses itens "flexionados" podem ser dispostos em qualquer direção (eixo em linha ou eixo de bloco), proporcionando muita flexibilidade ao alterar o tamanho (largura ou altura) da tela ou sua orientação.

Você pode dar uma olhada na especificação do Flexbox W3C clicando neste link.

Passo 1. Crie o HTML

Vamos começar este exemplo criando um arquivo HTML com algum código de exemplo. Eu preparei um pouco de HTML para você - é um container com 3 elementos filho.

• Abra seu editor de código preferido.
• Crie um arquivo HTML vazio.
• Visite esta página e copie o código HTML
• Cole esse código em seu arquivo HTML.

Passo 2. Crie o CSS

Agora que temos um container com 3 elementos, vamos adicionar alguns estilos.

• Crie um arquivo CSS chamado style.css. . Coloque este arquivo na mesma pasta que seu arquivo HTML. O link para este arquivo CSS já está na tag do seu arquivo HTML
• Copie e cole este código, que também está disponível no Codepen:

 /* GLOBAL STYLES */ * { box-sizing: border-box; } body { background-color: #AAA; margin: 0px 50px 50px; } .item { padding: 2rem; border: 5px solid #87b5ff; border-radius: 3px; font-size: 2em; font-family: sans-serif; font-weight: bold; background-color: #1c57b5; }

Esta imagem mostra como seu código aparecerá quando você abrir o arquivo HTML em um navegador. Os 3 itens filho são tão largos quanto o contêiner pai. A altura é determinada pelo conteúdo de cada item. Observe o preenchimento de 2rem (cerca de 32px em uma tela de desktop) em todos os lados.

Etapa 3. Os estilos CSS Flexbox

Agora é hora de iniciar a parte Flexbox deste tutorial.

• Edite o arquivo CSS e adicione este código:

 .container { display: flex; }

Esta imagem mostra como seu código ficará agora:

O que mudou? No lado técnico, o contêiner pai agora é um flex-container . Os elementos filho se transformaram em flex-items .

Por que o tamanho dos contêineres mudou? Os flex-items não são tão largos quanto seu container pai. Eles agora são tão amplos quanto o conteúdo dentro deles. Os flex-items aparecem como elementos flutuantes à esquerda. Eles se comportam como elementos inline .

Para ver claramente a largura do contêiner pai, você pode aplicar um background-color :

• Edite o código CSS e adicione este código:

 .container { display: flex; background-color: #f5ca3c; }

Veja como o contêiner agora aparece:

Você já notou que o flex-container se comporta (principalmente) como um elemento de nível de bloco. No entanto, também fazemos com que o contêiner se comporte como um elemento de nível embutido. Para fazer isso, alteramos o valor da propriedade display para inline-flex .

• Edite o código CSS:

 .container { display: inline-flex; background-color: #f5ca3c;

O contêiner flex agora é um elemento de nível inline, como você pode ver nesta imagem:

Antes de continuarmos neste tutorial, vamos alterar o comportamento para um elemento de nível de bloco.

• Edite o código CSS:

 .container { display: flex; background-color: #f5ca3c; flex-direction: row-reverse; }

Passo 4. Alterando linhas do Flexbox para colunas

Até agora, criamos um flex-container . Também vimos como os filhos desse contêiner se comportam quando transformados em flex-items .

Agora vamos aprender como mudar a direção do nosso layout. A direção padrão de um flex-container é baseada em linha. No entanto, você pode alterar esse comportamento com a propriedade flex-direction .

• Edite o código CSS:

 .container { display: flex; background-color: #f5ca3c; flex-direction: row; }

Depois de atualizar seu código, você não verá nenhuma alteração porque flex-direction: row é o valor padrão. Vamos fazer uma mudança bem visível: edite a direção do flex-container para column .

• Edite o código CSS:

 .container { display: flex; background-color: #f5ca3c; flex-direction: column; }

Esta próxima imagem mostra a mudança em seu layout:

Agora a direção do flex-container é baseada no eixo do bloco (coluna). Os flex-items são alinhados de cima para baixo e cada um desses itens ocupa a largura total de seu contêiner pai. Então, eles se comportam como elementos de bloco.

Agora, você pode começar a questionar as coisas neste ponto: " Ei, meu layout agora parece exatamente o mesmo que o primeiro layout deste tutorial! " Isso é verdade. Visualmente, não há diferença entre este layout atual com um flex-container e o primeiro layout deste exemplo com um contêiner de bloco.

No entanto, agora temos mais controle. Por exemplo, você pode inverter a direção de flex-items com as propriedades row-reverse e column-reverse .

• Edite o código CSS:

 .container { display: flex; background-color: #f5ca3c; flex-direction: column-reverse; }

Esta imagem mostra como seu layout ficará após esta nova atualização:

Para ver os flex-items invertidos em uma linha, altere o valor da propriedade flex-direction .

• Edite o código CSS:

 .container { display: flex; background-color: #f5ca3c; flex-direction: row-reverse; }

Resumo do Flexbox

Parabéns! Você aprendeu como declarar um flex-container . Você viu como flex-items se comportam dependendo da flex-direction aplicada ao seu contêiner pai ( row ou column ). Além disso, você sabe como reverter a ordem dos flex-items .

Todas essas alterações são feitas com CSS, portanto, não afetará a estrutura da marcação HTML do seu site. Essa é uma das vantagens de usar o Flexbox. Inverter a ordem dos flex-items é apenas uma das características deste módulo CSS. Há muito mais para aprender sobre o Flexbox, então fique atento à Parte 2 deste tutorial em alguns dias.

Mais tutoriais desta série

• CSS Flexbox #2. Como usar a propriedade justify-content
• CSS Flexbox #3. A propriedade align-items
• CSS Flexbox #4. A propriedade flex-grow