Tipos de display no CSS

A propriedade display define o modo como os elementos irão ser posicionados.

Valores:

1.Block

Posiciona o elemento como se ele fosse um elemento de bloco, ocupando todo o espaço possível. É o padrão de elementos como div e p.

 <div class="example">
   <p>Paragrafo 1</p>
   <p>Paragrafo 2</p>
   <p>Paragrafo 3<p>
  </div>

2.Inline

Posiciona o elemento fazendo-o ocupar o menor espaço possível.

<div class="example inline">
  <p>Paragrafo 1</p>
  <p>Paragrafo 2</p>
  <p>Paragrafo 3<p>
</div>

.example.inline p{
  display: inline;
}

3.Inline-block

Posiciona combinando as propriedade dos display block e inline.

<div class="example inline-block">
 <p>Paragrafo 1</p>
 <p>Paragrafo 2</p>
 <p>Paragrafo 3<p>
</div>

.example.inline-block p {
  display: inline-block;
}

4.flex

Permite criar um display flexível, considerando por padrão que todos estão em linha, permite definir como os elementos vão ser alinhados tanto verticalmente como horizontalmente e como deve se comporta em casos que não tiver espaço suficiente, além de como deve ser o seu crescimento de acordo com o espaço disponível.

<div class="example flex">
 <p>Paragrafo 1</p>
 <p>Paragrafo 2</p>
 <p>Paragrafo 3<p>
</div>

.example.flex {
  display: flex;
}

5.grid

Permite criar display composto por linhas e colunas, sendo possível definir o tamanho de cada espaço e o espaçamento entre eles.

<div class="example grid">
  <p>Paragrafo 1</p>
  <p>Paragrafo 2</p>
  <p>Paragrafo 3<p>
</div>

.example.grid {
  display: grid;
}

6.none

Constroi o elemento no dom, mas não o renderiza na página.

<div class="example none">
  <p>Paragrafo 1</p>
  <p>Paragrafo 2</p>
  <p>Paragrafo 3<p>
</div>

.example.none {
  display: none;
}

Os display block, inline, inline-block e none são aplicados tanto a nivel de elemento como de bloco, enquanto que o flex e grid são aplicados a nivel de bloco.

Todos os exemplos mencionados estão disponiveis no codepen.