Agora que você entende os fundamentos do Flexbox, vamos aplicar isso em situações comuns do desenvolvimento web.

Aqui o objetivo é ganhar **intuição**.

Exemplo 1 — Menu horizontal

Menus são um dos usos mais comuns do Flexbox. 

 <nav class="menu"> <a href="#">Início</a> <a href="#">Sobre</a> <a href="#">Contato</a> </nav> 
 .menu { display: flex; gap: 20px; }

O Flexbox organiza os links automaticamente em linha.

Exemplo 2 — Centralização perfeita

Um dos maiores clássicos do CSS. 

 <div class="container"> <div class="box">Centro</div> </div> 
 .container { display: flex; justify-content: center; align-items: center; height: 200px; }

.box {
padding: 20px;
background-color: #428bca;
color: white;
}
Essa técnica funciona tanto horizontal quanto verticalmente.

Exemplo 3 — Cards em linha

Muito comum em páginas iniciais e listagens. 

 <div class="cards"> <div class="card">Card 1</div> <div class="card">Card 2</div> <div class="card">Card 3</div> </div> 
 .cards { display: flex; gap: 16px; }

.card {
padding: 20px;
background-color: #f5f5f5;
flex: 1;
}

O flex: 1 faz com que os cards ocupem o mesmo espaço.

Quebra de linha — flex-wrap

Por padrão, os itens flex tentam ficar na mesma linha.

Com flex-wrap, permitimos que eles quebrem: 

 .cards { display: flex; flex-wrap: wrap; gap: 16px; }

Isso é essencial para layouts responsivos.

Alinhamento individual — align-self

Cada item pode se alinhar de forma diferente. 

 .card.destaque { align-self: center; }

Use com moderação.

Quando Flexbox é a escolha certa?

  • Distribuir elementos em uma direção
  • Centralizar conteúdo
  • Criar menus e listas
Pense em Flexbox como organizador de uma dimensão.

💾🧠 Resumo da aula para nunca mais esquecer

  • Flexbox é ideal para menus e cards
  • gap cria espaçamento entre itens
  • flex-wrap permite quebra de linha
  • flex controla o tamanho dos itens
  • Flexbox facilita layouts responsivos

Na próxima aula, vamos conhecer o CSS Grid — o layout bidimensional do CSS moderno 🧩✨

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?

Tetris

Desde o seu lançamento, em 1985, o fantástico jogo Tetris vende pelo menos 70 milhões de unidades por ano em todo o mundo! Os dados são oficiais e fornecidos pela THQ, uma das distribuidoras do título.

Final Fantasy X

O jogo Final Fantasy X para o Sony Playstation 2 vendeu, apenas no dia do seu lançamento, 1.455.732 cópias, estabelecendo um recorde de vendagem para as primeiras 24 horas de um game. Méritos da SquareSoft, que desenvolveu um excelente produto!

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

Nintendo Entertainment System

O console Nintendo Entertainment System (NES), da Nintendo, detém o recorde de videogame mais clonado em todo o mundo. Já foram catalogados mais de 300 aparelhos diferentes capazes de reproduzir seus jogos! Saiba mais sobre ele aqui.

Muitos aplicativos

Instalar vários aplicativos com o mesmo propósito, como editores de texto, reprodutores de músicas ou vídeos e até programas antívirus sobrecarregam o seu sistema operacional e ainda ocupam espaço desnecessário em seu HD. Tenha apenas um bom programa para cada função.