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;
}
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
💾🧠 Resumo da aula para nunca mais esquecer
- Flexbox é ideal para menus e cards
gapcria espaçamento entre itensflex-wrappermite quebra de linhaflexcontrola 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.
Você Sabia?
Computadores de 1,5 tonelada
Em 1949 a revista Popular Mechanics fez uma previsão para o futuro, dizendo: "Um dia os computadores pesarão menos do que 1,5 tonelada". E pensar que temos smartphones capazes de realizar milhões de vezes mais operações do que os computadores daquela época.
Mortal Kombat - O Filme
O filme Mortal Kombat, inspirado no jogo de mesmo nome, faturou 23 milhões de dólares apenas no fim de semana de estreia nos EUA. Ainda sobre este título de sucesso, outra cifra que impressiona é o faturamento ao longo do primeiro ano: 1 bilhão de dólares no mundo todo.
Mega Man
A primeira versão do clássico Mega Man, para Nintendo 8 bits, tem seu recorde de pontos estabelecido em 03/11/2006, por David Archey, que cravou 2.396.700 pontos, terminando o jogo.
Duck Hunt
Ao completar o nível 99 do jogo Duck Hunt, para Nintendo, o jogo retorna ao primeiro nível, mas um bug impede que se acerte os patos neste recomeço. Este é um exemplo do que é chamado no mundo dos games de "Kill Screen".
PDP-1
O primeiro computador a conseguir rodar o jogo Spacewar era o PDP-1, que custava 120 mil dólares e pertencia ao Massachusetts Institute of Technology. O jogo demorou 200 horas para ser desenvolvido, em 1962, e seu criador foi um cientista da computação chamado Steve Russel.










