Frontend Academy · Aula

Noções básicas de display: block, inline, flex e grid

Alterne entre valores de display e veja como block, inline, flex e grid organizam o conteúdo de maneiras diferentes.

Noções básicas de display: block, inline, flex e grid é uma aula grátis de Frontend Academy no CoddyKit. Esta é a aula 3 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de Frontend Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de Frontend Academy inclui 4 aulas no total.

A propriedade display

A propriedade display é a propriedade de CSS mais importante para o layout. Ela controla como um elemento participa do fluxo do layout e como seus filhos são organizados. Os valores mais usados são: block, inline, inline-block, flex, grid e none.

display: block

Elementos de bloco ocupam a largura total do contêiner e começam em uma nova linha. Exemplos: <div>, <p>, <h1>. Você pode definir largura, altura, margem e preenchimento em elementos de bloco.

.card {
  display: block;
  width: 100%;
  margin-bottom: 24px;
}

display: inline

Elementos inline fluem dentro do texto — não começam em uma nova linha. Exemplos: <span>, <a>, <strong>. Largura, altura e margens verticais não têm efeito sobre elementos inline.

span { display: inline; color: blue; }
/* Setting width: 200px on a span does nothing */

display: inline-block

inline-block combina os dois: o elemento flui em linha, como o texto, mas aceita largura, altura e margem vertical, como um bloco. É útil para botões e distintivos que devem ficar em uma linha de texto.

.badge {
  display: inline-block;
  padding: 4px 8px;
  background: #e2e8f0;
  border-radius: 4px;
  font-size: 0.75rem;
}

display: none

display: none remove completamente o elemento do layout — ele não ocupa espaço. Use visibility: hidden para ocultá-lo preservando o espaço que ocupava.

Flexbox — layout unidimensional

display: flex transforma um elemento em um contêiner flexível. Seus filhos diretos se tornam itens flexíveis que se organizam em uma linha, por padrão, ou em uma coluna. O Flexbox é excelente para distribuir espaço e alinhar itens.

.nav {
  display: flex;
  justify-content: space-between; /* horizontal */
  align-items: center;            /* vertical */
  gap: 16px;
}

Principais propriedades do Flexbox

.container {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 24px;
}

CSS Grid — layout bidimensional

display: grid transforma um elemento em um contêiner de grade. Você define linhas e colunas com grid-template-columns e grid-template-rows. O Grid é ideal para layouts de páginas e grades de cartões.

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

A unidade fr

A unidade fr (fração) distribui o espaço disponível. grid-template-columns: 1fr 2fr 1fr cria três colunas, sendo que a do meio recebe o dobro do espaço das outras.

.layout {
  display: grid;
  grid-template-columns: 240px 1fr; /* sidebar + main */
  gap: 32px;
}

Escolhendo entre Flexbox e Grid

Use Flexbox para layouts unidimensionais (uma linha de botões, uma pilha de cartões). Use Grid para layouts bidimensionais (a estrutura de uma página, uma galeria de fotos com linhas e colunas explícitas). Ambos podem coexistir na mesma página.

display: none vs visibility: hidden

display: none: remove do layout e não fica acessível para leitores de tela. visibility: hidden: fica invisível, mas continua ocupando espaço e na árvore de acessibilidade. opacity: 0: fica invisível, mas ocupa espaço e permanece acessível.

Verificação rápida

Você precisa organizar uma grade responsiva de cartões com várias linhas e colunas. Qual valor de display é o melhor ponto de partida?

Recapitulação: valores de display

block ocupa a largura total. inline flui com o texto. inline-block combina os dois. flex organiza filhos em uma dimensão. grid organiza filhos em duas dimensões. none remove o elemento do layout. Domine esses valores e você controlará todos os layouts na Web.

Perguntas Frequentes

A aula “Noções básicas de display: block, inline, flex e grid” é grátis?

Sim — o texto completo de “Noções básicas de display: block, inline, flex e grid” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de Frontend Academy, atualize para CoddyKit PRO. O curso de Frontend Academy inclui 4 aulas no total.

O que vou aprender em “Noções básicas de display: block, inline, flex e grid”?

Alterne entre valores de display e veja como block, inline, flex e grid organizam o conteúdo de maneiras diferentes. Você pratica Frontend Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.

Preciso ter experiência prévia para começar Frontend Academy?

Nenhuma experiência prévia é necessária. Frontend Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 3 de 4.

Quanto tempo leva a aula “Noções básicas de display: block, inline, flex e grid”?

A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.

Posso escrever e executar código nesta aula de Frontend Academy?

Sim. Cada aula de Frontend Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.

Todas as aulas deste curso

Seletores e a cascata
Cores, tipografia e modelo de caixa
Noções básicas de display: block, inline, flex e grid
Posicionamento: relative, absolute, fixed e sticky

← Voltar para Frontend Academy