Durante muito tempo, alinhar elementos no CSS foi difícil. Centralizar algo verticalmente, então… um pesadelo 😅

O Flexbox (Flexible Box Layout) surgiu para resolver isso de forma simples, previsível e poderosa.

O que é Flexbox?

Flexbox é um modelo de layout unidimensional. Ele organiza elementos em linha ou coluna.

Ele funciona sempre com dois papéis:

  • Container flex — o elemento pai
  • Itens flex — os elementos filhos

Ativando o Flexbox

Para usar Flexbox, basta definir display: flex no elemento pai. 

 .container { display: flex; }

A partir desse momento, todos os filhos passam a ser itens flex.

Eixo principal e eixo cruzado

O Flexbox trabalha com dois eixos:

  • Eixo principal (main axis)
  • Eixo cruzado (cross axis)

Por padrão:

  • Eixo principal → horizontal
  • Eixo cruzado → vertical
Todo alinhamento no Flexbox acontece em relação a esses eixos.

Direção dos itens — flex-direction

A propriedade flex-direction define a direção do eixo principal. 

 .container { display: flex; flex-direction: row; }

Valores comuns:

  • row — linha (padrão)
  • column — coluna

Alinhamento no eixo principal — justify-content

O justify-content controla o alinhamento dos itens no eixo principal. 

 .container { display: flex; justify-content: center; }

Valores comuns:

  • flex-start
  • flex-end
  • center
  • space-between
  • space-around
  • space-evenly

Alinhamento no eixo cruzado — align-items

O align-items controla o alinhamento dos itens no eixo cruzado. 

 .container { display: flex; align-items: center; }

Valores comuns:

  • stretch (padrão)
  • flex-start
  • center
  • flex-end

Centralização perfeita (o clássico)

Com Flexbox, centralizar algo ficou simples: 

 .container { display: flex; justify-content: center; align-items: center; }
Essa combinação é uma das mais usadas no CSS moderno.

Flexbox não é para tudo

Flexbox é excelente para:

  • Menus
  • Cards em linha ou coluna
  • Centralizações

Mas para layouts bidimensionais mais complexos, o ideal é usar CSS Grid (veremos em breve 😉).

💾🧠 Resumo da aula para nunca mais esquecer

  • Flexbox organiza elementos em linha ou coluna
  • display: flex ativa o Flexbox
  • Existe eixo principal e eixo cruzado
  • justify-content alinha no eixo principal
  • align-items alinha no eixo cruzado
  • Flexbox facilita alinhamento e distribuição

Na próxima aula, vamos usar o Flexbox na prática, criando menus, cards e layouts reais 💪✨

HARDWARE

Entendendo o seu computador

O que há dentro do meu computador?

Existem alguns componentes fundamentais presentes dentro do seu computador e é muito importante que você conheça um pouco sobre eles, seja para argumentar com algum vendedor durante a compra de um novo PC ou para identificar alguma atitude desleal de algum técnico que esteja te passando um orçamento para reparo. Na seção Raio-X aqui do Contém Bits você pode conhecer e entender mais detalhadamente sobre cada componente, ou também pode clicar abaixo no componente que deseja, para conhecê-lo melhor.

  • Gabinetes

  • Placas-Mãe

  • Processadores

  • Memória

  • Fontes

  • Drives Ópticos

  • Discos Rígidos

  • SSD

  • Placas de Som

  • Placas de Vídeo

Você Sabia?

Ultima Online

Criar um jogo é muito mais complexo do que parece. São milhares, às vezes, milhões de linhas de código. Isso não é exagero! Apenas o jogo Ultima Online possui 6.006.313 linhas de programação, totalizando 25.103.295 palavras

Tetris

O título Tetris detém o recorde de jogo mais adaptado de todos os tempos. No total foram mais de 60 plataformas diferentes que receberam alguma versão do quebra-cabeças criado por Alexey Pajitnov. Conheça mais sobre este incrível jogo clicando aqui.

Asteroids

O título Asteroids, do Atari, possui recorde de pontuação há 30 anos. Em 1982 um americano chamado Scott Safran atingiu a marca de 41.336.440. Atualmente ele faz parte de um minúsculo grupo de jogadores que conseguiram manter seus recordes por mais de 30 anos.

Civilization

A empresa Take-Two pagou à Infogrames mais de 22 milhões de dólares pelos direitos de Civilization, em novembro de 1994. Ainda sobre este título, Sid Meier, um dos seus fundadores, é o profissional da área dos games mais premiado em todo o mundo.

Senhas

Digitar senhas em computadores de uso coletivo é extremamente perigoso, pois além de softwares de monitoramento, existem dispositivos de hardware que podem capturar suas senhas. Evite ao máximo acessar sites de bancos a partir destes computadores. Veja mais aqui.