CSS Display, como e de que forma utilizar?

O CSS Display é utilizado para controlar como um elemento irá se comportar, por exemplo, se ele deve ficar visível, oculto, se comportar como uma coluna de uma tabela, etc. Na postagem de hoje as opções de display.

A sintaxe da propriedade display é simples, acompanhe abaixo:

display: none;

Utilizando como no exemplo acima, o elemento não será exibido e toda a sua formatação não permanecerão na página.

Já para exibir um conteúdo, tem muitas outras formas, acompanhe abaixo:

inline: exibi o conteúdo em na mesma linha (padrão por exemplo para um elemento como <span>).

block: exibi o elemento como um “bloco”.

flex: (css3) exibi o elemento como um bloco mais flexível (permitindo o auto ajuste).

inline-block: exibi o elemento da seguinte forma: em sua área externa ele se comporta inline, ou seja, em linha (os elementos que estão a volta, entende esse elemento como sendo um elemento em linha), e em usa área interna se comporta como um bloco.

inline-flex: (css3) exibi o elemento como linha, mas de forma flexível.

inline-table: exibi o elemento em linha, mas com um padrão de tabela.

list-item: exibi o elemento como se fosse uma <li> (item de uma listagem).

run-in: exibi o elemento em linha ou como um bloco, depende do contexto.

table: exibi o elemento como uma tabela (<table>).

table-caption: exibi o elemento como uma legenda de tabela (<caption>).

table-column-group: exibi o elemento como uma coluna agrupada de uma tabela (<colgroup>).

table-header-group: exibi o elemento como um cabeçalho de tabela (<thead>).

table-footer-group: exibi o elemento como um rodapé de uma tabela (<tfoot>).

table-row-group: exibi o elemento como corpo de uma tabela (tbody).

table-cell: exibi o elemento como uma célula de uma tabela.

table-column: exibi o elemento como uma coluna de uma tabela.

table-row: exibi o elemento com uma linha de uma tabela (<tr>).

initial: exibi o elemento como o padrão de exibição dele mesmo.

inherit: exibi o elemento com base na formatação do elemento contêiner dele (ou seja, o elemento pai).

É isso ai pessoal, dúvidas poste nos comentários.

Até a próxima.