Layout CSS com Flexbox e Grid

Uma página já tem um layout antes de você adicionar flexbox ou grade. O fluxo normal posiciona caixas na ordem do HTML. Em texto horizontal em inglês, os blocos são empilhados para baixo e o conteúdo em linha segue da esquerda para a direita, passando para outra linha quando uma linha fica cheia.

Blocos ocupam uma linha

Parágrafos, títulos, divisões e seções são caixas de bloco por padrão. Um bloco com width: auto preenche a largura disponível de seu contêiner e cresce em altura conforme seu conteúdo. Definir sua largura não faz o próximo bloco ocupar a mesma linha.

<p>Read the <a href="/guide">setup guide</a> first.</p>
<p>Then install it.</p>

Os parágrafos começam em linhas separadas. O link é uma caixa em linha dentro do primeiro parágrafo. Mesmo que o primeiro parágrafo tenha apenas 300px de largura, o segundo ainda começa abaixo dele.

Caixas em linha acompanham o texto

Um <span>, <a>, <strong> ou <em> normalmente ocupa apenas a largura de seu texto. Uma caixa em linha não substituída ignora width e height. Portanto, adicionar a { width: 200px; } não faz o link ter 200px de largura.

Preenchimentos internos, bordas e margens horizontais afastam o texto adjacente. Preenchimentos internos e bordas verticais são desenhados, mas não afastam as linhas ao redor; um fundo grande pode se sobrepor à linha acima ou abaixo. Margens verticais não têm efeito. Uma imagem é um elemento substituído: ela é em linha por padrão, mas width e height se aplicam a ela.

Margens verticais podem se combinar

No fluxo normal, margens verticais de caixas de bloco que se tocam podem colapsar em um único espaço. Um parágrafo com margin-bottom: 24px seguido de um título com margin-top: 32px deixa 32px entre eles. A maior margem positiva prevalece; o espaço não é de 56px. Com uma margem positiva de 24px e uma margem de −10px, o resultado é 14px. Margens horizontais permanecem separadas.

A margem superior de um primeiro filho também pode colapsar com a margem superior de seu elemento pai quando nenhuma borda, preenchimento interno ou conteúdo em linha as separa. Uma margem superior de 20px em um título pode mover todo um cabeçalho sem preenchimento interno para baixo, sem deixar espaço dentro dele. Use preenchimento interno superior para criar espaço interno, adicione uma borda ou atribua display: flow-root ao elemento pai. A margem inferior de um último filho também pode colapsar com a margem inferior de seu elemento pai.

Itens flexíveis e de grade não colapsam margens entre si. Se você mudar um elemento pai do fluxo normal para flexbox, as mesmas duas margens positivas podem passar a ser somadas. Caixas flutuantes e com posicionamento absoluto também mantêm suas margens separadas.

As direções seguem o modo de escrita

A direção de bloco indica para onde vão os blocos sucessivos; a direção em linha indica para onde o texto segue. Árabe e hebraico também usam linhas horizontais, mas sua direção em linha é da direita para a esquerda. Propriedades lógicas seguem essas direções: margin-inline-start: 16px cria uma margem esquerda em inglês e uma margem direita em árabe. padding-block define o preenchimento interno ao longo da direção de bloco.

A propriedade display controla a relação de uma caixa com seu elemento pai e a organização de seus filhos. São escolhas separadas. Um contêiner flexível pode ocupar uma linha inteira enquanto organiza seus próprios filhos lado a lado.

Leia display de fora para dentro

O tipo de exibição externo é de bloco ou em linha. O tipo de exibição interno descreve o layout dentro da caixa, como fluxo, flex ou grade.

A sintaxe moderna de duas palavras-chave torna a distinção visível: display: inline flex significa o mesmo que inline-flex. display: block flow-root significa o mesmo que flow-root. Um único valor como grid fornece por padrão um tipo externo de bloco.

Faça uma caixa em linha aceitar um tamanho

nav a {
  display: inline-block;
  padding: 12px 16px;
}

Cada link ainda fica em uma linha de texto, mas agora aceita largura, altura e margens verticais. Seu preenchimento interno vertical cria espaço no layout da linha em vez de apenas ser desenhado sobre as linhas próximas. Isso dá ao link um alvo de clique maior.

Espaços em branco entre elementos de bloco em linha no HTML aparecem como um pequeno espaço entre as caixas. Se você precisa de uma linha controlada com espaçamento exato, o flexbox oferece isso diretamente.

Alterar display não muda o significado do elemento HTML. Uma divisão estilizada em linha continua sendo um contêiner genérico. Escolha uma lista, um link ou um botão de acordo com sua finalidade e depois estilize sua caixa.

Oculte uma caixa com o efeito adequado

Uma mensagem de erro oculta com display: none não cria espaço. Exibi-la empurra o conteúdo seguinte para baixo. Usar visibility: hidden reserva o espaço, então revelar a mensagem não precisa mover nada. display: none também impede o foco do teclado e remove o conteúdo oculto da saída dos leitores de tela. Uma classe de texto visualmente oculto tem outra finalidade: manter o texto disponível para leitores de tela enquanto o oculta visualmente.

Filhos e regiões independentes

Com ul { display: grid; }, os itens de lista se tornam itens de grade. Os links dentro desses itens de lista permanecem no layout de seus próprios elementos pais. Para organizar esses links, dê ao item de lista seu próprio layout ou use uma subgrade quando forem necessárias trilhas compartilhadas.

display: contents remove a própria caixa do elemento envolvente para que seus filhos participem do layout ao redor. O comportamento de acessibilidade do navegador também pode remover a função do elemento envolvente, então evite isso em controles, listas e tabelas com significado.

display: flow-root cria um contexto de formatação de bloco, uma região de fluxo independente. Ele contém filhos flutuantes e impede que as margens do elemento pai colapsem com as margens dos filhos. Ele produz esses efeitos sem adicionar recorte ou barras de rolagem.

Um retrato em um artigo frequentemente precisa ter texto ao lado por algumas linhas e depois texto em largura total abaixo dele. Um elemento flutuante cria essa forma de fluxo do texto. Sua função é diferente da de uma barra lateral que permanece em uma coluna separada.

Coloque uma imagem ao lado do texto em fluxo

img.portrait {
  float: left;
  width: 160px;
  margin: 0 16px 8px 0;
}

Coloque a imagem antes dos parágrafos que devem contorná-la. A imagem se move para a borda esquerda de seu contêiner. O texto seguinte usa o espaço à direita, mantendo uma distância horizontal de 16px e de 8px abaixo de sua borda inferior. Quando o texto passa pela imagem, as linhas voltam a ocupar toda a largura do contêiner. Use float: right para a borda oposta e float: none para remover a flutuação.

Um elemento flutuante é removido do fluxo normal, mas o conteúdo em linha próximo ainda o contorna. As próprias caixas de bloco seguintes ignoram o elemento flutuante: seus fundos e bordas podem se estender atrás dele. Ver o fundo de um parágrafo sob a imagem não significa que seu texto deixou de contorná-la.

Um elemento flutuante se torna uma caixa de nível de bloco. Portanto, um <span> flutuante pode aceitar largura e altura. Sem largura definida, uma caixa de texto flutuante encolhe para se ajustar ao conteúdo; uma imagem tem suas próprias dimensões.

Comece a próxima seção abaixo da imagem

Suponha que o texto seja mais curto que o retrato e que um novo título de seção comece ao lado dele. A propriedade clear controla essa relação:

.next-section {
  clear: both;
}

O título se move para baixo dos elementos flutuantes anteriores de qualquer lado. clear: left libera apenas os flutuantes à esquerda; clear: right libera apenas os da direita. Aplicar clear a um título posterior não transforma, por si só, a imagem anterior novamente em um bloco comum.

Faça o elemento pai envolver seus elementos flutuantes

Um elemento pai com apenas filhos flutuantes não recebe deles altura no fluxo normal. Seu fundo e sua borda podem parecer colapsados, e o conteúdo seguinte pode subir para ficar ao lado dos elementos flutuantes. Faça o elemento pai contê-los:

.profile {
  display: flow-root;
}

A altura do elemento pai agora se estende para envolver a imagem flutuante. Isso é diferente de clear: flow-root altera a região de fluxo do elemento pai, enquanto clear move um elemento seguinte para baixo dos elementos flutuantes.

Folhas de estilo antigas frequentemente contêm uma técnica clearfix: um pseudoelemento ::after com content: "", display: block e clear: both. Você também pode encontrar overflow: auto usado para conter elementos flutuantes. Isso pode adicionar rolagem quando o conteúdo é grande demais; flow-root expressa diretamente a tarefa de contenção.

Reconheça layouts de colunas antigos

Antes de flexbox e grade, as colunas de página frequentemente eram flutuantes, com larguras percentuais e regras de clear. Mantenha essas regras com conhecimento de elementos flutuantes, mas escolha flexbox ou grade para novas colunas que precisam de dimensionamento e alinhamento.

Um filho direto de um contêiner flexível ou de grade segue esse layout, então float não tem efeito sobre esse item. Se uma imagem flutuante deixar de fazer o texto contorná-la depois que você adicionar display: flex a seu elemento pai, inspecione primeiro o layout do pai.

O posicionamento permite que uma caixa se sobreponha a outra ou se afaste de sua posição normal. Antes de definir um deslocamento, decida se a caixa deve manter seu espaço original e qual ancestral deve servir como referência.

Estático, relativo e absoluto

Com position: relative; top: 10px; left: 20px, uma caixa é desenhada 10px abaixo e 20px à direita de sua posição original. Seus vizinhos permanecem onde estavam. O espaço original continua reservado, então um deslocamento grande pode fazer a caixa se sobrepor aos vizinhos.

Um elemento pai com posicionamento relativo não precisa de deslocamentos para fornecer uma referência a um filho com posicionamento absoluto. Esse é um uso comum do posicionamento relativo.

Prenda um emblema a um cartão

.card {
  position: relative;
}
.badge {
  position: absolute;
  top: 8px;
  right: 8px;
}

O emblema está fora do fluxo normal, então o cartão não reserva espaço para ele. Suas bordas superior e direita ficam 8px para dentro das bordas do preenchimento interno do cartão. Deixe espaço suficiente no conteúdo do cartão para que um título longo não passe por baixo do emblema.

O bloco de referência de uma caixa com posicionamento absoluto geralmente é a caixa de preenchimento interno de seu ancestral posicionado mais próximo. Um elemento posicionado tem qualquer valor de position exceto static. Se o cartão permanecer estático, o emblema procura mais acima na cadeia de ancestrais. Sem um ancestral que sirva de referência, ele usa o bloco de referência inicial: um retângulo do tamanho da área de visualização no topo do documento que rola com a página. Um ancestral com transform, filter ou perspective diferente de none também pode estabelecer essa referência.

Estique ou centralize uma sobreposição

Uma caixa com posicionamento absoluto, tamanho automático e deslocamentos que não a esticam encolhe para se ajustar ao conteúdo. Definir os deslocamentos esquerdo e direito com largura automática faz com que ela preencha o espaço entre eles; o par superior e inferior funciona de maneira semelhante para uma altura automática.

.overlay {
  position: absolute;
  inset: 0;
}

inset define os deslocamentos superior, direito, inferior e esquerdo em conjunto. Com dimensões automáticas e sem margens, essa sobreposição preenche o bloco de referência. Uma largura ou altura definida altera o dimensionamento, então remova esses limites quando a camada tiver que cobrir toda a caixa.

Para um emblema centralizado de tamanho desconhecido, use top: 50%; left: 50%; transform: translate(-50%, -50%). Os deslocamentos movem seu canto superior esquerdo para o centro do bloco de referência. A translação o move de volta pela metade de sua própria largura e altura. Com largura e altura conhecidas, inset: 0; margin: auto é outro método de centralização.

Verifique a referência das porcentagens

Um elemento pai com dimensionamento pela caixa de conteúdo, width: 400px e preenchimento interno horizontal de 20px tem uma caixa de preenchimento interno de 440px. Um filho com posicionamento absoluto e width: 50% tem, portanto, uma largura de conteúdo de 220px. Medir apenas a caixa de conteúdo de 400px do elemento pai leva ao resultado errado.

Use posicionamento absoluto para um emblema, uma dica flutuante ou uma sobreposição. Colunas de página precisam de caixas que respondam ao tamanho umas das outras; flexbox, grade e fluxo normal fornecem essa relação.

Um controle para voltar ao topo e um cabeçalho de tabela precisam permanecer visíveis, mas têm relações diferentes com a página. O posicionamento fixo prende um controle a uma janela de referência. O posicionamento aderente mantém uma caixa no fluxo e limita seu movimento à sua seção.

Fixe um controle à área de visualização

.back-to-top {
  position: fixed;
  right: 16px;
  bottom: 16px;
}

O botão permanece no canto inferior direito da janela enquanto o documento rola. Ele não ocupa espaço no fluxo normal. Um cabeçalho fixo também não reserva espaço e pode cobrir o primeiro parágrafo.

Para um cabeçalho fixo de 64px, body { padding-top: 64px; } deixa espaço para o conteúdo inicial. Defina também html { scroll-padding-top: 64px; } para que links de seção não posicionem seus títulos de destino sob o cabeçalho. Dê um fundo ao cabeçalho para que o texto que rola atrás dele não fique visível através dele.

Um transform, filter ou perspective diferente de none em um ancestral pode fazer desse ancestral o bloco de referência do elemento fixo. O elemento então permanece dentro desse ancestral e pode rolar junto com ele até sair da tela. Inspecione os ancestrais quando um controle fixo se mover inesperadamente com a página.

Faça um título aderir dentro de uma seção

thead th {
  position: sticky;
  top: 0;
  background: white;
}

Um título aderente ocupa primeiro seu lugar normal. Quando a rolagem o levaria acima do limite top: 0, ele permanece ali. Ele não pode ultrapassar seu bloco de referência: o fim de sua seção acaba empurrando-o para fora da área visível. Isso é útil para tabelas longas e navegação por seções.

A área de visualização é a referência usual para posicionamento fixo. O posicionamento aderente usa o ancestral de rolagem relevante mais próximo; a página é a referência quando não há uma caixa de rolagem mais próxima.

Investigue uma caixa aderente que não adere

Verifique estas causas em ordem:

1. Defina um deslocamento diferente de auto no eixo em que o elemento deve aderir, como top: 0 para rolagem vertical. A palavra-chave sticky sozinha não define um limite.
2. Inspecione os ancestrais em busca de overflow: hidden, auto ou scroll. Eles podem se tornar a referência do elemento aderente mesmo quando outra caixa está realmente rolando.
3. Compare a altura da caixa aderente com a de seu bloco de referência. Um elemento envolvente que tem apenas a altura do título não dá espaço para ele se mover.

Uma barra lateral aderente em uma grade também pode se esticar até a altura total da linha. align-self: start permite que ela mantenha a altura de seu conteúdo e deixa espaço para se mover.

Mantenha conteúdo e foco visíveis

Barras fixas e aderentes usam parte da tela visível. Com o texto ampliado para 200%, uma barra de navegação pode ficar muito mais alta. Teste a navegação por teclado além da rolagem. O critério 2.4.11 das WCAG 2.2, Foco não obscurecido (mínimo), exige que o conteúdo adicionado pelo autor não oculte totalmente um elemento com foco. Mantenha as barras baixas e forneça espaço de rolagem adequado ao redor dos destinos.

Quando caixas se sobrepõem, a ordem de empilhamento determina qual delas você vê na frente. Um z-index maior pode trazer uma caixa para a frente, mas apenas dentro do grupo em que esse valor é comparado.

Faça z-index ter efeito

z-index funciona em elementos posicionados e em itens flexíveis ou de grade. Um parágrafo estático no fluxo normal o ignora. Um item de grade estático pode usá-lo sem adicionar position: relative.

Sem níveis explícitos, caixas posicionadas são desenhadas acima de caixas comuns não posicionadas. Para caixas comparáveis no mesmo nível, a que aparece depois no HTML é desenhada por cima. Valores positivos, zero e negativos de z-index dão mais controle sobre essa ordem.

Um contexto é empilhado como uma unidade

Um contexto de empilhamento contém um grupo que o navegador empilha como um todo. O nível de um filho não pode elevar o grupo acima de um contexto irmão mais alto.

.site-header {
  position: relative;
  z-index: 1;
}
.menu {
  position: absolute;
  z-index: 9999;
}
main {
  position: relative;
  z-index: 2;
}

Aqui .menu está dentro de .site-header, enquanto main é seu irmão. Compare primeiro os grupos externos: o cabeçalho está no nível 1 e main no nível 2. Main é desenhado acima de todo o cabeçalho, incluindo o menu. Aumentar 9999 altera apenas a posição do menu dentro do cabeçalho.

Eleve o próprio cabeçalho, por exemplo para z-index: 3, ou remova o nível desnecessário de main. Escolha a mudança que corresponda à ordem desejada para toda a página.

Descubra o que cria o grupo

O elemento raiz cria um contexto de empilhamento. Outras causas comuns são:

• Uma caixa relativa ou absoluta com z-index diferente de auto.
• Um item flexível ou de grade com z-index diferente de auto.
• Toda caixa fixa ou aderente.
• opacity abaixo de 1, ou um transform ou filter diferente de none.
• isolation: isolate.

Um elemento pai com opacity: 0.9 pode, portanto, prender um menu suspenso mesmo que ninguém tenha definido um nível nesse elemento. Percorra os ancestrais nas ferramentas do desenvolvedor quando um número maior não produzir diferença visível. Procure o primeiro par de grupos irmãos cuja ordem esteja errada.

Mantenha decorações dentro de um componente

.panel {
  position: relative;
  isolation: isolate;
}
.panel-decoration {
  position: absolute;
  inset: 0;
  z-index: -1;
}

isolation: isolate cria um contexto sem alterar a aparência do painel. O filho com nível negativo é desenhado atrás do texto do painel, mas acima do fundo dele. Sem o contexto local, ele pode ficar atrás do fundo do elemento pai e desaparecer.

Use uma pequena escala compartilhada para as camadas planejadas da página: por exemplo, 1 para cartões elevados, 10 para um cabeçalho aderente, 100 para menus suspensos e 1000 para uma caixa de diálogo modal. Propriedades personalizadas CSS, como --z-dropdown: 100, facilitam a manutenção dessas escolhas.

O flexbox organiza um grupo em uma direção principal. Ele é adequado para links de navegação, barras de ferramentas e outros itens cujos tamanhos vêm de seu conteúdo. Um layout flexível com quebra pode ter várias linhas, mas cada linha distribui seu espaço independentemente.

Crie o contêiner

.nav {
  display: flex;
}

Os filhos diretos da navegação se tornam itens flexíveis. Um link dentro de um item de lista não é um item flexível da navegação, a menos que também seja um filho direto. O texto diretamente dentro do contêiner forma um item flexível anônimo.

Os padrões são uma linha, sem quebra, sem crescimento e com encolhimento permitido. Os itens começam na borda inicial do eixo principal. Em uma linha horizontal, itens com altura automática se esticam até a altura da linha, então frequentemente parecem ter a mesma altura.

Identifique os eixos antes de alinhar

O eixo principal segue flex-direction. O eixo transversal é perpendicular a ele. Em texto horizontal em inglês:

Uma linha segue a direção em linha, então seu início fica à direita em texto escrito da direita para a esquerda. Uma coluna segue a direção de bloco. Principal e transversal descrevem funções, não direções horizontais e verticais permanentes.

justify-content atua no eixo principal. align-items atua no eixo transversal. Depois de mudar de linha para coluna, justify-content: center centraliza verticalmente, desde que haja altura disponível.

Calcule quais itens cabem

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

Considere cinco cartões em uma largura de conteúdo de 700px. Cada um começa com 200px e pode crescer ou encolher. Três cartões mais dois espaçamentos precisam de 632px; quatro mais três espaçamentos precisam de 848px. Três cabem na primeira linha.

A primeira linha divide 700px menos 32px de espaçamentos: cada cartão passa a ter cerca de 222,7px de largura. Os dois restantes dividem 700px menos um espaçamento de 16px: cada um passa a ter 342px de largura. Os itens da segunda linha não herdam as larguras da primeira. Use grade quando as colunas precisarem ficar alinhadas entre linhas.

flex-flow: row wrap é uma forma abreviada de definir direção e quebra de linha. Sem quebra, o flexbox mantém todos os itens em uma linha, encolhendo-os onde seus limites de tamanho permitem.

Mantenha uma ordem de leitura significativa

O valor padrão de order é 0. Valores menores aparecem primeiro; order: -1 coloca um item antes dos itens comuns. Direções invertidas e order alteram a ordem de desenho, enquanto leitores de tela e o foco normal do teclado continuam seguindo o HTML.

Mantenha sequências importantes em uma ordem coerente no HTML. A reordenação visual pode fazer uma pessoa que usa teclado saltar pela tela e pode violar as WCAG 1.3.2, Sequência significativa, ou 2.4.3, Ordem do foco, quando prejudica o significado ou a operação.

Um item também pode ser um contêiner. Um cartão em uma linha flexível pode usar seu próprio display: flex; flex-direction: column para empilhar seu conteúdo. Use inline-flex quando o contêiner externo deve ficar dentro de uma linha de texto, como um botão com ícone e rótulo.

O flexbox começa com um tamanho para cada item e depois ajusta esses tamanhos para caber no contêiner. As três partes de flex controlam esse ajuste: grow, shrink e basis, nessa ordem.

Comece pela base

flex-basis fornece o tamanho inicial ao longo do eixo principal. Com auto, ele usa a largura do item em uma linha ou sua altura em uma coluna; se esse tamanho também for automático, o conteúdo fornece o tamanho. Uma base explícita tem precedência sobre a largura, enquanto os tamanhos mínimo e máximo ainda limitam o resultado final.

Subtraia todas as bases e espaçamentos do tamanho de conteúdo do contêiner. Um resultado positivo é espaço livre para crescimento. Um resultado negativo é espaço que os itens precisam ceder.

Distribua o espaço positivo

Três itens em uma linha de 600px têm bases de 100px e fatores de crescimento 1, 1 e 2. Sem espaçamentos, as bases usam 300px, restando 300px. As quatro partes de crescimento dividem esse restante em 75px cada. Os tamanhos finais são 175px, 175px e 250px.

Agora adicione gap: 20px. Dois espaçamentos consomem 40px, deixando 260px após as bases. Cada parte passa a ser de 65px; as larguras finais passam a ser 165px, 165px e 230px. Um fator de 2 dobra o espaço adicionado, não toda a largura final.

Ceda espaço usando encolhimento ponderado

Dois itens com bases de 300px e 400px ocupam um contêiner de 500px sem espaçamento. Eles precisam perder 200px. Se ambos tiverem flex-shrink: 1, seus pesos de encolhimento serão 300 e 400: cada fator é multiplicado por seu tamanho base.

O primeiro perde cerca de 85,7px e termina com cerca de 214,3px. O segundo perde cerca de 114,3px e termina com cerca de 285,7px. Fatores de encolhimento iguais não significam perdas iguais em pixels. flex-shrink: 0 protege o tamanho base de um item, o que é útil para um avatar ou logotipo.

Esses cálculos descrevem itens sem preenchimento interno, bordas, margens ou limites de tamanho que alterem o resultado. Verifique essas restrições quando um layout real apresentar um resultado diferente.

Leia valores comuns da propriedade abreviada

Dois itens com larguras de conteúdo de 80px e 200px em uma linha de 600px passam a ter 240px e 360px com flex: auto: ambos ganham metade dos 320px restantes. Com flex: 1 e sem mínimos limitantes, ambos começam em zero e passam a ter 300px de largura.

Permita que uma coluna flexível fique estreita

O mínimo automático de um item flexível pode mantê-lo tão largo quanto uma URL ou linha de código sem quebras. Permita o encolhimento do item e trate o conteúdo dentro dele:

.sidebar { flex: 0 0 240px; }
.main { flex: 1; min-width: 0; }
.main pre { overflow-x: auto; }

A barra lateral permanece com 240px de largura. A área principal ocupa o restante. O código rola dentro da área principal em vez de forçar toda a página a ficar mais larga. Para texto longo comum, overflow-wrap: anywhere permite quebras. Um mínimo zero disponibiliza espaço; por si só, ele não quebra nem permite rolar o conteúdo.

O alinhamento começa depois do dimensionamento. Identifique o eixo principal, o eixo transversal e o espaço restante em cada um. Uma propriedade pode ser válida e ainda assim não produzir diferença visível quando não resta espaço para distribuir.

Distribua espaço no eixo principal

justify-content posiciona o grupo ao longo do eixo principal. Para três itens de 100px em uma linha de 600px sem espaçamentos, restam 300px:

flex-start agrupa itens no início do eixo principal; flex-end os agrupa no fim. start e end seguem a direção da escrita. Em um row-reverse em inglês, flex-start agrupa junto à borda direita, mas start agrupa junto à esquerda.

Se itens com flex: 1 consumirem todo o espaço da linha, justify-content não terá espaço restante para distribuir. Reduzir ou remover o crescimento muda essa situação.

Alinhe dentro de cada linha

align-items posiciona itens no eixo transversal dentro de sua linha. O padrão usual, stretch, faz itens de altura automática em uma linha preencherem a altura dela. Um item com altura definida não se estica dessa forma. Use center, start ou end para outras posições, ou baseline para alinhar textos de tamanhos diferentes por sua linha de base.

align-self substitui essa escolha para um item. O flexbox não tem justify-self: os itens compartilham o eixo principal como grupo. justify-items também não alinha itens flexíveis.

Para centralizar um único filho nas duas direções, defina justify-content: center; align-items: center em seu elemento pai flexível. Um elemento pai mais alto, como um com min-height: 100vh, dá espaço para a centralização vertical aparecer. Se o único item já preencher a dimensão transversal da linha, centralizá-lo nela não produz movimento.

Separe grupos com margens automáticas

nav {
  display: flex;
  align-items: center;
  gap: 16px;
}
.logo {
  margin-inline-end: auto;
}

Em inglês horizontal, o logotipo permanece à esquerda enquanto os links se movem para a direita. Sua margem final automática absorve o espaço restante. Uma margem inicial automática em um item, por sua vez, empurra esse item e os seguintes em direção ao fim. Margens lógicas se adaptam quando a direção do texto muda.

Um único item com margin: auto pode ficar centralizado nos dois eixos. Quando um item é grande demais, margens automáticas evitam que seu transbordamento fique além da borda inicial inacessível, o que a centralização comum pode causar.

Diferencie linhas de itens

align-content move as linhas como grupo no eixo transversal em um contêiner com quebra e espaço disponível. Ele não tem efeito com flex-wrap: nowrap. Com wrap, ainda pode posicionar uma linha mesmo que os itens atuais caibam em apenas uma linha. align-items cuida dos itens dentro de cada linha.

gap: 16px 24px define um espaçamento de 16px entre linhas e de 24px entre colunas. Gap cria espaço entre itens e linhas, nunca ao redor da parte externa do contêiner. Adicione preenchimento interno para criar espaço externo. Qualquer espaço distribuído pelo alinhamento é adicional ao espaçamento definido por gap.

A grade define linhas e colunas em conjunto. Defina as trilhas em um contêiner e deixe seus filhos diretos ocupá-las. Ao contrário das linhas flexíveis com quebra, as linhas de grade compartilham a mesma estrutura de colunas.

Nomeie as partes

Uma trilha é uma linha ou coluna entre duas linhas de grade. Uma célula é a interseção de uma linha com uma coluna. Uma área de grade é um retângulo de uma ou mais células. Espaçamentos separam as trilhas.

.dashboard {
  display: grid;
  grid-template-columns: 200px 1fr 2fr;
  gap: 20px;
}

grid-template-columns define as colunas explícitas; grid-template-rows define as linhas explícitas. Sem colunas explícitas, uma grade tem uma coluna e seus itens são empilhados em linhas.

Calcule uma parte em fr

A unidade fr divide o espaço restante depois das trilhas fixas e dos espaçamentos. Em um contêiner de 900px, o exemplo tem uma coluna fixa de 200px e dois espaçamentos de 20px. Subtraia-os primeiro: restam 660px. As duas colunas flexíveis solicitam três partes no total, então uma parte é de 220px. As larguras são 200px, 220px e 440px.

As frações dividem o espaço restante para as trilhas, não todos os 900px. Uma trilha 2fr recebe o dobro da parte flexível de uma trilha 1fr quando os tamanhos mínimos não as limitam.

Repita trilhas e defina limites

repeat(4, 1fr) é uma forma abreviada de escrever quatro trilhas flexíveis iguais. Também é possível repetir um padrão: repeat(2, 100px 1fr) cria 100px 1fr 100px 1fr.

Os tamanhos das trilhas também podem usar comprimentos, porcentagens, auto, min-content e max-content. As palavras-chave de conteúdo solicitam tamanhos com base nas necessidades intrínsecas do conteúdo.

minmax(150px, 1fr) dá a uma trilha um mínimo de 150px e um máximo flexível. Para linhas criadas automaticamente, use grid-auto-rows: minmax(100px, auto) para obter um mínimo de 100px e permitir que conteúdo mais alto expanda a linha.

Uma trilha 1fr simples tem um mínimo automático, como minmax(auto, 1fr). Uma URL longa sem quebras pode fazer uma coluna ficar mais larga que as demais. Use repeat(3, minmax(0, 1fr)) quando as colunas precisarem dividir igualmente a largura disponível e permita a quebra ou rolagem de conteúdo grande demais dentro delas.

Mantenha os espaçamentos dentro da largura disponível

gap: 16px 32px significa 16px entre linhas e 32px entre colunas. Ele não cria preenchimento interno ao redor da grade.

Três colunas de 33.33% já usam quase todo um contêiner de 900px. Dois espaçamentos de 20px acrescentam então cerca de 40px além de sua largura. Trilhas fracionárias consideram esses espaçamentos antes de dividir o espaço, então repeat(3, 1fr) evita esse transbordamento causado pela soma de porcentagem e espaçamento quando os mínimos do conteúdo cabem.

Deixe as linhas responderem ao conteúdo

grid-template-rows: auto 1fr auto é adequado para cabeçalho, área principal e rodapé. As linhas externas se ajustam a seu conteúdo. Com uma altura ou altura mínima do contêiner a preencher, a linha central ocupa a altura restante. Mantenha espaço para o conteúdo crescer; uma altura mínima de página permite que uma página mais longa se expanda.

O posicionamento na grade descreve os limites de um item. Conte as linhas de grade ao redor das colunas e linhas ou nomeie uma região retangular e posicione o item nela. Ambos os métodos organizam caixas sem alterar sua ordem no HTML.

Conte os limites, não as colunas

Uma grade de três colunas tem quatro linhas de coluna. Em inglês horizontal, a linha de coluna 1 fica à esquerda e a linha de linha 1 fica no topo. Números negativos contam de trás para a frente a partir do fim da grade explícita: -1 é sua última linha.

Para cobrir três colunas começando na linha 1, termine na linha 4. Terminar na linha 3 cobre apenas duas trilhas.

Em um painel com quatro colunas e três linhas, posicione um gráfico com grid-column: 1 / 4; grid-row: 1 / 3. Ele ocupa três colunas e duas linhas: seis células. Um painel de estatísticas em grid-column: 4; grid-row: 1 / 3 ocupa a última coluna ao lado dele. Uma tabela em grid-column: 1 / -1; grid-row: 3 preenche a terceira linha.

Desenhe a página usando nomes de áreas

.page {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "header header"
    "nav    main"
    "footer footer";
}
header { grid-area: header; }
nav    { grid-area: nav; }
main   { grid-area: main; }
footer { grid-area: footer; }

Cada string descreve uma linha, e cada palavra descreve uma célula. Repetir header ao longo da primeira linha permite que o cabeçalho ocupe as duas colunas. Um ponto marca uma célula vazia. Todas as linhas devem conter o mesmo número de células, e cada nome repetido deve formar um retângulo. Uma área nomeada em forma de L torna toda a declaração grid-template-areas inválida.

Uma área chamada main também cria linhas chamadas main-start e main-end. Você pode usar esses nomes para os limites de outro item. Defina nomes personalizados de linhas entre colchetes na lista de trilhas, como [content-start] 600px [content-end].

Sobreponha itens em uma área de grade

Uma imagem e uma legenda podem usar grid-area: 1 / 1. Elas compartilham a primeira célula; a legenda, que aparece depois no HTML, é desenhada sobre a imagem. align-self: end move a legenda para a parte inferior dessa área. Itens de grade aceitam z-index sem precisar de uma posição diferente de estática, então você pode alterar explicitamente a ordem de suas camadas.

Preserve a sequência de leitura

O posicionamento manual afeta a aparência, não a ordem do HTML seguida por leitores de tela e pelo foco do teclado. Mantenha instruções, títulos e links em uma ordem significativa no código-fonte. Um layout pode parecer coerente enquanto a navegação por Tab salta entre células distantes; isso pode violar as WCAG 1.3.2 ou 2.4.3 quando o significado ou a operação são prejudicados.

Uma lista de produtos pode crescer de alguns cartões para muitos sem alterar seu CSS. Defina as colunas, deixe o posicionamento automático criar linhas e escolha se as colunas não usadas devem manter seu espaço.

Deixe os itens encontrar a próxima célula

O padrão grid-auto-flow: row posiciona itens sem posição definida na ordem do código-fonte, percorrendo uma linha e depois descendo para a próxima. Ele pula células ocupadas. Trilhas extras formam a grade implícita.

.products {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: minmax(150px, auto);
}

Sete itens criam três linhas. A última linha contém um item. Cada linha tem pelo menos 150px de altura e pode crescer com seu conteúdo. Trilhas explícitas vêm do modelo; trilhas implícitas são adicionadas conforme o posicionamento exige.

Números negativos de linha contam apenas dentro da grade explícita. Se você definir colunas, mas nenhuma linha, grid-row: 1 / -1 não poderá significar todas as linhas criadas automaticamente. Defina linhas explícitas quando um item precisar ocupar toda a altura delas.

grid-auto-flow: column preenche colunas e cria colunas extras dimensionadas por grid-auto-columns. Adicionar dense permite que itens menores posteriores preencham lacunas deixadas por itens que ocupam mais trilhas. Isso pode alterar a sequência visual, então evite-o para instruções ordenadas ou outros conteúdos cuja sequência importa.

Calcule o número de colunas a partir de um mínimo

.products {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 16px;
}

Em uma largura de conteúdo de 1000px, quatro colunas de 200px mais três espaçamentos de 16px precisam de 848px. Cinco colunas mais quatro espaçamentos precisam de 1064px, então apenas quatro cabem. Suas larguras finais flexíveis são de 238px: subtraia 48px de espaçamentos e divida os 952px restantes por quatro.

Em 500px, duas colunas mínimas mais um espaçamento precisam de 416px; três precisam de 632px. Duas cabem e cada uma passa a ter 242px. O número de colunas muda conforme o espaço disponível, sem um ponto de quebra.

Escolha o que acontece com colunas não usadas

Com itens suficientes, auto-fill e auto-fit parecem iguais. Com apenas três itens nessa grade de 1000px, auto-fill mantém uma quarta coluna vazia, então cada coluna ocupada permanece com 238px de largura. auto-fit recolhe essa trilha vazia e seu espaçamento. As três colunas ocupadas passam então a dividir 968px e a ter cerca de 322,7px cada.

Uma coluna com um item em qualquer posição está ocupada, mesmo que uma célula em sua última linha esteja vazia. Auto-fit recolhe trilhas vazias, não todas as células vazias.

Proteja o contêiner mais estreito

A repetição automática precisa de um tamanho mínimo ou máximo definido para a trilha. repeat(auto-fill, 1fr) é inválido. Um mínimo fixo de 400px também pode transbordar em um contêiner de 320px. Use:

grid-template-columns:
  repeat(auto-fit, minmax(min(100%, 400px), 1fr));

min(100%, 400px) escolhe o menor mínimo, então um contêiner estreito pode acomodar uma trilha sem ser forçado a ter 400px. Continue tratando textos ou imagens grandes demais dentro dos cartões.

O alinhamento na grade tem duas escalas diferentes. Você pode mover um item dentro de sua área ou mover todo o conjunto de trilhas dentro do contêiner. Primeiro identifique qual espaço você quer distribuir.

Alinhe itens dentro de suas áreas

Em inglês horizontal, propriedades justify- atuam no eixo em linha, horizontal. Propriedades align- atuam no eixo de bloco, vertical. A grade permite alinhar itens nos dois eixos.

Os valores incluem start, end, center e stretch. align-items: baseline alinha as linhas de base do texto. A maioria dos itens com tamanho automático se estica por padrão. Uma imagem com proporção própria normalmente começa na borda inicial da área em vez de ser esticada nas duas direções.

Em uma linha de cartões, o esticamento faz cada cartão preencher a altura da linha. Mude para align-items: start e cada cartão manterá a altura de seu conteúdo; suas bordas inferiores podem ficar em alturas diferentes. align-self: end em uma legenda a posiciona na parte inferior de sua área de grade.

Centralize uma caixa nas duas direções

.hero {
  display: grid;
  place-items: center;
  min-height: 60vh;
}

place-items combina align-items seguido de justify-items. Com um valor, ele aplica esse valor aos dois. A altura mínima cria espaço vertical ao redor de um item baixo. place-self é a propriedade abreviada correspondente para um item individual.

O item continua sendo uma caixa com texto dentro. Para centralizar as palavras dentro dessa caixa, defina text-align: center no item. Mover uma caixa para o centro de uma célula não altera o alinhamento de seu texto.

Mova as trilhas como grupo

justify-content posiciona todo o conjunto de colunas ao longo do eixo em linha. align-content posiciona as linhas ao longo do eixo de bloco. Essas propriedades precisam de espaço extra fora das trilhas para que seu efeito apareça.

Para três colunas fixas de 200px em um contêiner de 900px sem espaçamentos, restam 300px. justify-content: center deixa 150px antes da primeira coluna e depois da última. justify-content: space-between coloca as colunas externas nas bordas do contêiner e distribui 150px entre colunas vizinhas. Os itens permanecem dentro de suas próprias trilhas enquanto elas se movem.

Se as colunas usarem fr e preencherem toda a largura disponível, não haverá espaço horizontal restante para justify-content distribuir. Definir justify-items: center ainda pode centralizar visivelmente um filho estreito dentro de sua trilha larga. A primeira propriedade posiciona trilhas; a segunda posiciona itens.

Uma página pode usar vários métodos de layout ao mesmo tempo. Escolha cada método de acordo com a relação entre as caixas naquela parte da página: uma sequência de texto, um grupo flexível, colunas compartilhadas ou uma camada sobreposta.

Comece pelo conteúdo

O fluxo normal já cuida de artigos, títulos e parágrafos. Ele quebra o texto em linhas e move os blocos seguintes para baixo quando o conteúdo anterior cresce. Adicione mais estrutura quando o design exigir uma relação diferente.

O flexbox é unidimensional: distribui espaço em uma linha ou coluna, com cada linha quebrada funcionando de forma independente. A grade é bidimensional: define colunas e linhas em conjunto. São escolhas sobre as restrições do layout, não uma proibição de usar qualquer uma das ferramentas para uma linha simples.

Compare uma linha com quebra e colunas compartilhadas

Sete cartões ocupam uma largura de conteúdo de 1000px com espaçamentos de 16px. No flexbox, atribua flex: 1 1 200px a cada cartão e permita a quebra. Quatro cartões cabem na primeira linha e crescem para 238px cada. Os três cartões da segunda linha crescem para cerca de 322,7px cada. Cada linha usa seu próprio espaço livre.

Agora use repeat(auto-fill, minmax(200px, 1fr)) na grade. Quatro colunas cabem. Todos os sete cartões usam as mesmas larguras de coluna de 238px; a última linha deixa uma célula vazia. A grade mantém o alinhamento entre as linhas.

Use a versão com flexbox quando itens mais largos na última linha forem adequados ao design. Use a versão com grade quando uma estrutura de colunas consistente for importante.

Combine métodos em níveis diferentes

Uma página pode usar grade para uma barra lateral e uma área principal, flexbox para a barra de ferramentas da área principal e um emblema com posicionamento absoluto dentro de um cartão. Um cartão pode ser um item de grade por fora e um contêiner flexível por dentro. Defina a relação externa em seu elemento pai e a organização interna no próprio cartão.

Para uma lista longa de texto, columns: 3 ou column-width: 250px cria um fluxo de múltiplas colunas. O texto continua para baixo em uma coluna e depois passa para a próxima; não é uma grade de cartões independentes. Verifique se esse percurso de leitura é adequado ao conteúdo.

Leia layouts antigos com cuidado

Colunas flutuantes, grades de blocos em linha e tabelas HTML usadas para layout de página ainda aparecem em código antigo. Suas regras de espaçamento e contenção diferem das de flexbox e grade. Ao criar uma nova estrutura de página, use ferramentas modernas de layout. Reserve <table> para dados cujas linhas e colunas expressem relações tabulares.

Um layout de página útil tem largura de conteúdo legível, espaço nas bordas e espaço para conteúdo mais longo. Crie suas regiões principais no fluxo para que um artigo que cresce mova o rodapé para baixo naturalmente.

Centralize uma coluna de conteúdo

.container {
  max-width: 1100px;
  margin-inline: auto;
  padding-inline: 16px;
}

O máximo limita o crescimento em telas largas. As margens automáticas em linha dividem o espaço restante entre os dois lados. O preenchimento interno mantém o texto afastado das bordas em telas estreitas. Para texto corrido, max-width: 65ch fornece uma medida aproximada de 65 caracteres; um ch é a largura do dígito 0 na fonte atual. Uma linha de cerca de 45–75 caracteres é uma faixa útil para leitura, embora a largura das letras varie.

Coloque as regiões da página em uma grade

.page {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "header  header"
    "sidebar main"
    "footer  footer";
}
header { grid-area: header; }
aside  { grid-area: sidebar; }
main   { grid-area: main; }
footer { grid-area: footer; }

O cabeçalho e o rodapé ocupam as duas colunas. A barra lateral mantém 240px, e a área principal recebe o restante. O mínimo zero na trilha flexível impede que conteúdo largo force a trilha a ultrapassar sua parte do espaço disponível. Trate esse conteúdo com quebra de linha ou rolagem dentro da área principal.

O padrão de três colunas frequentemente chamado de layout santo graal usa 200px 1fr 200px e as áreas da linha central "nav main aside", com cabeçalho e rodapé ocupando as três colunas. Colunas laterais fixas ainda precisam de largura disponível suficiente; teste o layout em tamanhos estreitos.

Mantenha o rodapé de uma página curta na parte inferior

body {
  margin: 0;
  min-height: 100dvh;
  display: grid;
  grid-template-rows: auto 1fr auto;
}

Com cabeçalho, conteúdo principal e rodapé como filhos diretos, a linha central preenche a altura não usada. O rodapé de uma página curta chega à parte inferior da janela; o de uma página longa vem depois do conteúdo. Esse padrão é chamado de rodapé no fim da página, mas o rodapé não precisa de position: sticky.

A unidade tradicional relativa à área de visualização é vh. Em celulares, 100vh pode se estender atrás dos controles visíveis do navegador. A altura dinâmica da área de visualização, dvh, acompanha a altura visível conforme esses controles mudam; todos os principais navegadores a suportam desde 2022. Use min-height para que conteúdo mais longo possa aumentar a página. Um height fixo pode fazer o conteúdo transbordar sobre o que vem depois.

Uma alternativa com flexbox usa um body em coluna com min-height: 100dvh e depois main { flex: 1; }. Para uma linha com barra lateral, use .sidebar { flex: 0 0 240px; } e .main { flex: 1; min-width: 0; }.

Faça uma barra lateral aderir e uma imagem ocupar toda a largura

Uma barra lateral de grade pode usar position: sticky; top: 16px; align-self: start. Manter a altura do próprio conteúdo deixa espaço para se mover dentro de sua linha.

Para conteúdo de artigo em largura total, defina as colunas como 1fr min(65ch, 100% - 32px) 1fr. Coloque os filhos comuns na coluna 2 e uma imagem larga em grid-column: 1 / -1. A trilha central permanece legível enquanto a imagem ocupa toda a largura do contêiner.

Pequenas partes da interface combinam as mesmas relações: uma imagem mantém seu tamanho, o texto preenche o restante, controles relacionados compartilham uma linha ou vários cartões alinham suas partes internas. Dê a cada contêiner o layout que expressa sua função.

Escolha o tipo adequado de centralização

O flexbox também pode centralizar um filho com justify-content: center; align-items: center. Verifique se o contêiner tem espaço disponível no eixo relevante.

Uma linha de navegação e uma linha de mídia

nav { display: flex; align-items: center; gap: 16px; }
.logo { margin-inline-end: auto; }
.media { display: flex; align-items: flex-start; gap: 16px; }
.media img { flex: none; width: 64px; }
.media-body { flex: 1; min-width: 0; }

Em inglês, o logotipo permanece à esquerda e os links se agrupam à direita. Quando a navegação tem exatamente dois filhos, um logotipo e uma lista de links, justify-content: space-between pode separá-los; a lista precisa de seu próprio layout flexível para organizar os links.

Na linha de mídia, a imagem mantém sua largura. O texto recebe o restante e pode encolher. O alinhamento no início do eixo transversal impede que uma imagem de altura automática se estique para acompanhar um bloco de texto longo. Isso é adequado para um comentário, perfil ou linha de produto.

Cartões com botões alinhados

.cards {
  display: grid;
  grid-template-columns:
    repeat(auto-fill, minmax(min(100%, 240px), 1fr));
  gap: 24px;
}
.card { display: flex; flex-direction: column; }
.card .button { margin-top: auto; }

A grade do elemento pai estica os cartões de cada linha até a mesma altura. Dentro de cada cartão, a margem superior automática usa o espaço vertical não utilizado antes do botão, posicionando-o na parte inferior. Os títulos ainda podem ter alturas diferentes.

Para alinhar títulos, texto e rodapés entre cartões, use subgrade. Faça cada cartão ser um item de grade que ocupa três linhas do elemento pai e defina display: grid; grid-template-rows: subgrid. Cada cartão adota essas linhas do elemento pai para suas três partes. A subgrade funciona nos principais navegadores desde setembro de 2023.

Sobreposições, formulários e grupos de entrada

Para texto sobre uma imagem, faça do elemento envolvente uma grade e coloque os dois filhos em grid-area: 1 / 1. Uma legenda posterior é desenhada acima da imagem. Outra opção é um elemento envolvente relativo com uma camada de legenda absoluta usando inset: 0.

Um formulário com rótulos e campos alternados pode usar grid-template-columns: max-content 1fr; gap: 12px 16px; align-items: center. O rótulo mais largo define uma coluna compartilhada de rótulos. Os campos ficam alinhados na segunda coluna; linhas flexíveis separadas não podem compartilhar automaticamente essa largura de rótulo.

Um grupo de pesquisa usa display: flex; gap: 8px, com input { flex: 1; min-width: 0; } e button { flex: none; }. O campo de entrada pode encolher enquanto o botão mantém sua largura natural. Para etiquetas ou controles de barra de ferramentas que devem passar para outra linha mantendo suas larguras naturais, use display: flex; flex-wrap: wrap; gap: 8px.

Um problema de layout é mais fácil de corrigir quando você inspeciona as caixas reais do navegador. Comece pelo elemento que se moveu ou transbordou e verifique o layout do qual ele participa antes de alterar valores.

Inspecione em uma ordem útil

1. Encontre o elemento nas ferramentas do desenvolvedor.
2. Inspecione o display computado de seu elemento pai: fluxo normal, flex e grade dão funções diferentes às propriedades.
3. Verifique se sua propriedade se aplica a esse elemento nesse layout.
4. Compare tamanhos, margens e posição computados com os valores esperados.
5. Ative ou desative uma declaração por vez para ver qual restrição causa o problema.

O painel do modelo de caixa mostra conteúdo, preenchimento interno, borda e margem. As sobreposições de inspeção de grade mostram linhas, números, trilhas e espaçamentos; as de flexbox mostram itens e a distribuição de espaço entre eles. Use-as para verificar o que o navegador construiu, não apenas o que a folha de estilo pretendia.

Verifique propriedades inativas

Deslocamentos não fazem nada em um elemento estático. Largura e altura não fazem nada em um <span> em linha comum, embora dimensionem uma imagem em linha. z-index precisa de uma caixa posicionada ou de um item flexível ou de grade. float não tem efeito sobre itens flexíveis ou de grade, e justify-self não pode alinhar um item flexível.

Uma declaração de alinhamento válida pode não ter efeito visível porque os itens já usam todo o espaço. align-content também não tem efeito em um contêiner flexível nowrap. O posicionamento aderente precisa de um deslocamento e de espaço para se mover.

Identifique a origem do transbordamento horizontal

O transbordamento pode vir de uma caixa grande demais ou de uma caixa menor empurrada para além de uma borda por margens, deslocamentos ou larguras de elementos vizinhos. Causas comuns incluem:

• Uma largura fixa, como 1200px, maior que a área de visualização.
• width: 100% mais preenchimento interno com dimensionamento content-box.
• width: 100vw, que pode incluir a largura de uma barra de rolagem vertical visível.
• Uma palavra longa sem quebra, URL ou linha de código.
• O mínimo automático de um item flexível ou de uma trilha 1fr.
• Um mínimo de repetição automática mais largo que seu contêiner.

Adicione temporariamente * { outline: 1px solid red; } para revelar as bordas. Contornos não usam espaço no layout, então expõem os limites sem alterar os tamanhos das caixas como as bordas fariam.

Analise um bloco de código largo

Uma página flexível tem uma barra lateral de 240px e uma coluna principal contendo um exemplo de código de 1400px de largura. A página inteira rola para os lados. A sobreposição de inspeção do flexbox mostra a área principal mais larga que sua parte do espaço, e sua largura mínima computada é auto.

.main { min-width: 0; }
.main pre { overflow-x: auto; }

A primeira regra permite que o item flexível encolha. A segunda mantém o código largo acessível por meio de rolagem horizontal local. Ocultar todo o transbordamento da página esconderia o sintoma sem tornar o código disponível.

Para outras surpresas, inspecione margens que colapsam, um cabeçalho fixo que cobre conteúdo, um filho com posicionamento absoluto cujo elemento pai desejado é estático ou uma camada presa dentro de um contexto de empilhamento criado por opacidade ou transformação.

Teste conteúdo real e espaço estreito

Redimensione a janela, use um nome ou URL longo e amplie o texto para 200%. Verifique o foco do teclado perto de barras fixas. O critério 1.4.4 das WCAG 2.2 exige redimensionamento do texto para 200% sem perda de conteúdo ou função. O critério 1.4.10 geralmente exige refluxo em 320 pixels CSS sem rolagem em duas direções; conteúdo que precisa de um layout bidimensional, como uma tabela de dados, tem exceções. Teste mais do que o texto curto de exemplo que inicialmente fez a página parecer correta.