Programação B

Layout: Box Model e Flexbox

Cada elemento HTML é renderizado como uma caixa (box) retangular. Essa caixa tem quatro camadas, de dentro para fora:

1. Content — o conteúdo em si (texto, imagem).
2. Padding — espaço interno entre o conteúdo e a borda.
3. Border — a borda visível da caixa.
4. Margin — espaço externo entre a borda e os elementos vizinhos.

Quando definimos padding: 1.5rem no card, estamos dizendo: “entre o conteúdo e a borda, coloque 1.5rem de espaço em todos os lados”. A propriedade margin-bottom: 1rem cria espaço entre um card e o próximo.

Organizando cards com Flexbox

Duplique o <article> três vezes no HTML para ter três cards. Eles aparecem empilhados verticalmente — é o comportamento padrão. Para organizá-los lado a lado, envolva os cards num contêiner e aplique Flexbox:

<div id="event-list">
  <article>...</article>
  <article>...</article>
  <article>...</article>
</div>

#event-list {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

#event-list article {
  flex: 1 1 300px;
}

display: flex transforma o contêiner numa caixa flexível. Os filhos (os cards) se alinham lado a lado automaticamente. flex-wrap: wrap permite que eles “quebrem” para a próxima linha quando não cabem. gap: 1rem define o espaço entre os cards. E flex: 1 1 300px diz que cada card tem no mínimo 300px de largura, mas pode crescer para preencher o espaço disponível.

O resultado: numa tela larga, dois ou três cards por linha; numa tela estreita, um por linha. A estrutura HTML não mudou — só o CSS controla o layout. Essa separação entre conteúdo e apresentação é um dos princípios fundamentais do desenvolvimento web.