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?
Pac Man
Apenas no ano de 1982, o clássico Pac Man vendeu mais de 400 mil máquinas de fliperama em todo o mundo e recebeu cerca de 7 bilhões de moedas nestas máquinas. Saiba mais.
Ábaco
O ábaco é o dispositivo de cálculo mais antigo construído e conhecido pelo homem. Suas formas mais primitivas datam de 400 a.C. e eles foram encontrados na China e na Babilônia. Para saber mais sobre a história dos computadores, clique aqui.
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.
Mouse
O mouse foi criado em 9 de dezembro de 1968, por um americano chamado Douglas Engelbart, que o batizou de "XY Position Indicator for a Display System". Conheça a história do mouse clicando aqui.
Máquina de Pascal
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.










