Layout

Layout é como as caixas do Belavista se arrumam na página: empilhadas, lado a lado, em colunas, ou fora do fluxo. display escolhe o modo; Flexbox e Grid resolvem a maior parte do presente.

O exemplo deste capítulo é 29-layout, no pacote que acompanha o volume. Mude display de um bloco, preveja se os filhos ficam em linha ou em coluna, recarregue e confira.

O que você vai aprender

• Relacionar display ao contexto de formatação.
• Diferenciar fluxo normal, flex, grid, float e posicionamento.
• Escolher ferramenta certa para o problema.
• Evitar float como layout geral de página.
• Preparar o terreno para os capítulos 30 e 31.

A propriedade display

display: block, inline, inline-block, none, flex, grid, flow-root, entre outros. O valor muda como o elemento gera caixa e como trata os filhos.

.chip {
  display: inline-block;
  padding: 0.25rem 0.5rem;
}

.oculto {
  display: none; /* some do layout e da árvore de acessibilidade de apresentação */
}

Fluxo, float e posição

No fluxo normal, blocos empilham; inlines andam na linha. Float tira parcialmente do fluxo (hoje: imagem com texto ao lado, não o grid da página). Position (relative, absolute, fixed, sticky) desloca com outro contrato.

.figura {
  float: inline-start;
  margin-inline-end: 1rem;
  max-width: 12rem;
}

.selo {
  position: sticky;
  top: 0;
}

Flex e Grid em uma frase

Flexbox — uma dimensão (linha ou coluna de itens que se repartem). Grid — duas dimensões (linhas e colunas ao mesmo tempo). Multicol (column-count) flui texto em colunas de jornal.

<!DOCTYPE html>
<html lang="pt-BR">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Layout — Laboratório Belavista</title>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <div class="painel">
      <aside>Agenda</aside>
      <main>Cartazes da semana</main>
    </div>
  </body>
</html>

.painel {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.painel aside {
  flex: 1 1 12rem;
}

.painel main {
  flex: 2 1 20rem;
}

Erro comum: usar position: absolute em tudo para “encostar” elementos. O fluxo some, o zoom quebra e o teclado sofre. Prefira flex/grid.

Critério para avançar

Você avança se: nomeia três valores de display; sabe quando não usar float; monta um painel simples com flex e gap.

Confira o exemplo completo

A captura mostra o exemplo desta etapa. Abra a pasta completa, mude uma coisa e confira no navegador antes de seguir.

Atividades

1. Flex ou Grid para um menu horizontal de links?
2. O que display: none faz de diferente de visibility: hidden?
3. Por que float não é o layout principal do site hoje?

Respostas comentadas

1. Flexbox costuma bastar (uma dimensão). Grid também serve; flex é o caminho mais direto.
2. none remove do layout; hidden reserva o espaço e mantém a caixa invisível.
3. Foi um hack histórico para colunas. Flex e Grid alinham, espaçam e refluem com menos efeito colateral.