Praticando CSS Flexbox

Posicionando elementos com Flexbox - Apresentação

Olá, Dev! Tudo bem? Meu nome é Rodrigo Harder e irei te acompanhar ao longo dessa jornada.

Audiodescrição: Rodrigo se descreve como um homem de pele clara, olhos castanho-claros, cabelo curto e liso castanho-escuro, sobrancelhas castanho-escuras, e barba curta castanho-escura. Ele veste uma camisa preta com o logotipo da Alura em branco, e está sentado em frente a uma parede clara iluminada em gradiente azul, com um microfone preto e cinza à sua frente.

O que vamos aprender?

Neste curso, vamos explorar as principais propriedades do Flexbox.

Conclusão

Aguardamos você no próximo vídeo para darmos início aos nossos estudos!

Posicionando elementos com Flexbox - Praticando Flexbox

Neste vídeo, iremos praticar Flexbox utilizando a ferramenta CodePen.

Praticando Flexbox

Conhecendo o projeto inicial no CodePen

Começaremos com o site do CodePen aberto.

Importante! Caso você não conheça a ferramenta, disponibilizamos na atividade Preparando o ambiente um passo a passo para criar uma conta, além de um artigo explicando o que é o CodePen e como utilizá-lo. Se preferir, você pode usar o editor de código de sua preferência, pois disponibilizamos um repositório no GitHub.

No CodePen, a interface apresenta, à esquerda, a área para inserção de código. Temos um exemplo de código HTML, um código CSS e um espaço para JavaScript, que não utilizaremos neste curso.

index.html:

<div class="container">
  <div class="itens azul">Azul</div>
  <div class="itens amarelo">Amarelo</div>
  <div class="itens vermelho">Vermelho</div>
</div>

style.css:

.container {
  width: 70vw;
  height: 70vh;
  background-color: #021017;
}

.itens {
  width: 100px;
  height: 100px;
}

.azul {
  background-color: #6bd1ff;
}

.amarelo {
  background-color: #ffba05;
}

.vermelho {
  background-color: #f16165;
}

À direita, visualizamos o layout da estrutura montada com os códigos HTML e CSS.

Atualmente, temos um retângulo azul-marinho com três quadrados de cores diferentes empilhados no canto superior esquerdo, sem espaçamento entre eles.

Analisando o código HTML

Vamos analisar o código HTML para entender o que ele faz?

Temos uma primeira div com a classe container, que contém três outras div com a classe itens para todas, e classes específicas para definir as cores:

• Azul;
• Amarelo;
• E vermelho.

A div de classe container representa o retângulo azul-marinho maior, enquanto as outras tags div representam os quadrados empilhados, isto é, os itens.

Utilizando Flexbox

Nosso objetivo com o Flexbox é reposicionar os elementos no container azul-marinho.

O layout final desejado possui os três quadrados coloridos centralizados na tela do container, alinhados em uma linha com espaçamento entre eles, e com a ordem de cores alterada para amarelo, vermelho e azul, da esquerda para a direita.

Definindo a propriedade display

Para construir isso, precisamos tornar o retângulo azul-marinho flexível.

Assim como em um álbum de figurinhas, onde as figurinhas podem ser movidas antes de serem coladas, queremos que os quadrados possam deslizar dentro do elemento container. A propriedade essencial do Flexbox para isso é display: flex.

style.css:

.container {
  width: 70vw;
  height: 70vh;
  background-color: #021017;
  display: flex;
}

/* código omitido */

Ao aplicar display: flex na classe container, os quadrados, que estavam em coluna, passam a ser exibidos em linha, lado a lado. Observe abaixo:

O Flexbox trabalha com a ideia de container, ou seja, não precisamos posicionar cada quadrado individualmente; basta definir o comportamento no container e ele organizará os elementos da maneira que determinamos.

Utilizamos a classe container para o retângulo azul-marinho e a classe itens para cada quadrado, pois o retângulo maior representa o container, enquanto os itens correspondem a cada um dos elementos dentro do container azul-marinho.

O uso do display: flex é um padrão no Flexbox. Quando inserimos essa propriedade em um container, ele transforma o eixo principal dos elementos em horizontal, ou seja, todos os elementos passam a se alinhar em uma linha.

Definindo a propriedade flex-direction

Por padrão, o display: flex define o eixo principal como linha (row).

No entanto, podemos alterar a direção do display flexível com a propriedade flex-direction, que também adicionaremos ao escopo da classe container. Poderíamos usar column para organizar em coluna, mas manteremos em row para este exemplo.

.container {
  width: 70vw;
  height: 70vh;
  background-color: #021017;
  display: flex;
  flex-direction: row;
}

/* código omitido */

Observação: embora, por padrão, o display: flex alinhe os elementos em linha, precisamos entender o que cada propriedade faz no código.

Definindo a propriedade gap

Para adicionar espaçamento entre os elementos, utilizamos a propriedade gap. Definiremos um gap de 50 pixels, que aplica espaçamento entre colunas e linhas.

Se quisermos espaçamentos específicos, podemos usar as propriedades row-gap (espaçamento entre linhas) e column-gap (espaçamento entre colunas).

.container {
  width: 70vw;
  height: 70vh;
  background-color: #021017;
  display: flex;
  flex-direction: row;
  gap: 50px;
}

/* código omitido */

Definindo as propriedades justify-content e align-items

Para centralizar os elementos no container, tanto no eixo horizontal quanto no vertical, utilizamos as propriedades justify-content e align-items. Utilizando justify-content: center, conseguimos centralizar os elementos no eixo principal, isto é, no eixo horizontal, enquanto com align-items: center, centralizamos no eixo transversal (vertical).

.container {
  width: 70vw;
  height: 70vh;
  background-color: #021017;
  display: flex;
  flex-direction: row;
  gap: 50px;
  justify-content: center;
  align-items: center;
}

/* código omitido */

Com isso, os elementos são alinhados exatamente no centro do container.

Explorando alinhamentos

Além de centralizar, podemos posicionar os elementos em diferentes locais do container. A propriedade align-items, por exemplo, pode ser configurada com flex-start (início do container flexível) ou flex-end (final do container).

O valor flex-start posiciona os elementos na parte superior central do container, enquanto o valor flex-end os posiciona na parte inferior.

A propriedade justify-content também aceita flex-start, alinhando à esquerda, e flex-end, alinhando à direita, além de outras opções de espaçamento:

• space-between: espaçamento máximo entre elementos, sem considerar as bordas;
• space-around: espaçamento ao redor dos elementos, correspondente à metade do espaçamento entre eles;
• space-evenly: espaçamento equivalente entre todos os elementos e bordas.

Essas propriedades permitem flexibilidade na disposição dos elementos dentro do container. Convidamos você a explorar essas configurações no CodePen, testando diferentes valores e observando os efeitos no layout.

Entendendo o espaçamento space-evenly

Podemos nos perguntar por que o espaço entre os quadrados amarelo e vermelho, e entre o quadrado azul e amarelo, é maior do que o espaço entre o quadrado azul e a borda, e o quadrado vermelho e a borda. A explicação é simples: o espaço aplicado entre os elementos conta tanto o elemento azul quanto o elemento amarelo.

Dessa forma, temos um espaço que contém uma parte do espaço do elemento azul e uma parte do espaço do elemento amarelo. O mesmo é válido para vermelho e amarelo.

Observação: no nosso caso, para centralizar os elementos, vamos utilizar a propriedade justify-content definida como center. Quando utilizamos valores como space-between, space-around e space-evenly no justify-content, a propriedade gap é desconsiderada, pois ela é um espaçamento fixo. Já com a propriedade justify-content: center estabelecida, o valor do gap volta a ser considerado, resultando em 50 pixels de distância entre os elementos.

Reordenando os elementos

No projeto final, precisamos mudar a ordem dos quadrados:

1. Amarelo;
2. Vermelho;
3. Azul.

Para isso, utilizaremos a propriedade order do Flexbox, aplicada em cada item individualmente, de modo a definir a ordem exata em que cada elemento aparecerá.

No código HTML, a ordem original é azul, amarelo e vermelho. Quando aplicamos a propriedade order, ela tem uma prioridade inferior à ordem do HTML. Portanto, é necessário definir a propriedade order para todos os elementos.

Vamos definir order: 1 para a classe amarelo, order: 2 para a classe vermelho, e order: 3 para a classe azul, resultando na ordem desejada.

/* código omitido */

.azul {
  background-color: #6bd1ff;
  order: 3;
}

.amarelo {
  background-color: #ffba05;
  order: 1;
}

.vermelho {
  background-color: #f16165;
  order: 2;
}

Feito isso, teremos um layout idêntico ao que mostramos inicialmente:

Responsividade no Flexbox

Até o momento, lidamos apenas com um display fixo. Nosso objetivo é que os quadrados possam ser visualizados em diferentes tamanhos de tela.

Ao diminuir o tamanho do container, os elementos começam a reduzir de tamanho e, eventualmente, ultrapassam os limites do container, devido à propriedade flex-shrink, que faz com que os elementos encolham para caber no container.

Para resolver esse problema, aplicamos a propriedade flex-wrap com o valor wrap, permitindo que os elementos se reposicionem dentro do container sem diminuir de tamanho, quebrando a linha conforme necessário.

.container {
  width: 70vw;
  height: 70vh;
  background-color: #021017;
  display: flex;
  flex-direction: row;
  gap: 50px;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}

/* código omitido */

Dessa forma, garantimos responsividade nos elementos do container. Na classe itens, definimos para todos os quadrados uma largura e uma altura de 100 pixels, e queremos que esses valores sejam respeitados; é isso que o flex-wrap faz.

Assim como a propriedade flex-shrink faz os elementos encolherem, a flex-grow permite que os elementos cresçam para ocupar o espaço disponível no container.

Podemos aplicar valores diferentes de flex-grow para cada item, resultando em tamanhos variados. Nesse caso, aplicaremos em itens com o valor 1.

/* código omitido */

.itens {
  width: 100px;
  height: 100px;
  flex-grow: 1;
}

/* código omitido */

Com isso, os quadrados se transformam em retângulos, pois cresceram para ocupar o espaço. O valor passado para essa propriedade deve ser inteiro e positivo.

A base para o crescimento é definida pela propriedade flex-basis. Vamos aplicá-la com o valor de 50 pixels ao retângulo vermelho e conferir o resultado?

/* código omitido */

.vermelho {
  background-color: #f16165;
  order: 2;
}

Agora, em vez de 100 pixels, o retângulo terá 50 pixels. Podemos repetir o processo para os demais elementos, para definir um valor base de crescimento. Para isso, basta reaproveitar a definição da propriedade flex-basis adicionada na classe vermelho, e recortar para a classe azul.

/* código omitido */

.azul {
  background-color: #6bd1ff;
  order: 3;
  flex-grow: 1;
  flex-basis: 50px;
}

/* código omitido */

O elemento azul diminuirá de tamanho, pois passará a considerar como base de crescimento o valor de 50 pixels. Assim, ele fica no tamanho normal de 100 pixels.

Simplificando o código

Podemos simplificar o código utilizando as propriedades flex-flow e flex.

A propriedade flex-flow combina o flex-direction e o flex-wrap usados anteriormente, enquanto a propriedade flex resume flex-shrink, flex-grow e flex-basis.

Dito isso, vamos começar removendo as propriedades flex-direction e flex-wrap da classe container. Em seguida, vamos adicionar flex-flow após a propriedade display. Como valores, passaremos row e wrap, antes aplicados individualmente.

.container {
  width: 70vw;
  height: 70vh;
  background-color: #021017;
  display: flex;
  flex-flow: row wrap;
  gap: 50px;
  justify-content: center;
  align-items: center;
}

/* código omitido */

Além disso, vamos utilizar a propriedade flex para simplificar o uso de flex-grow, flex-shrink e flex-basis, aplicando-a diretamente nos itens.

Na classe azul, substituiremos as propriedades flex-grow e flex-basis por apenas um flex recebendo os valores 1, 1 e 150 pixels, nessa ordem.

O primeiro 1 representa o valor de encolhimento; o segundo 1, o valor de crescimento; e o terceiro valor, a base para crescimento e encolhimento.

/* código omitido */

.azul {
  background-color: #6bd1ff;
  order: 3;
  flex: 1 1 150px;
}

/* código omitido */

Conclusão

Ao longo deste curso, aprendemos:

• A criar um layout flexível;
• A posicionar elementos;
• A trabalhar com responsividade;
• E a simplificar o código.

A prática é essencial. Recomendamos explorar as atividades propostas durante o curso para aplicar o conhecimento adquirido e reforçar o conteúdo abordado.

Em caso de dúvidas, o fórum está disponível para suporte. Além disso, a comunidade no Discord é um ótimo espaço para interação e aprendizado contínuo.

Agradecemos por acompanhar este curso. Nos encontramos em breve!

Sobre o curso Praticando CSS Flexbox

O curso Praticando CSS Flexbox possui 34 minutos de vídeos, em um total de 14 atividades. Gostou? Conheça nossos outros cursos de HTML e CSS em Front-end, ou leia nossos artigos de Front-end.

Matricule-se e comece a estudar com a gente hoje! Conheça outros tópicos abordados durante o curso:

• Posicionando elementos com Flexbox