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?

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.


O personagem Mario só possui bigode porque quando ele foi criado, em 1981, a resolução de tela dos equipamentos disponíveis não permitia que fosse desenhada uma boca, então os desenvolvedores fizeram o grande bigode para contornar essa limitação tecnológica.


A Máquina de Pascal, criada em 1642 pelo filósofo, físico e matemático francês Blaise Pascal, é reconhecida como o primeiro computador do mundo e ele foi criado com o objetivo de calcular impostos. Saiba mais.


O ENIAC, primeiro computador valvulado do mundo, possuía 17.000 válvulas, 500.000 pontos de solda, 30 toneladas de peso e ocupava uma área de 180 metros quadrados. Clique aqui e conheça mais sobre a história dos computadores.


As primeiras máquinas de fliperama do mundo a utilizarem moedas, chamadas de Galaxy Game, custavam mais de 20 mil dólares para serem produzidas. Saiba mais sobre elas aqui.