🧱 Display no CSS: Entenda de Forma Simples Como os Elementos se Comportam!
Fala, pessoal da DIO! 😄 Se você já tentou alinhar coisas com CSS e sentiu que os elementos têm vida própria, pode ficar tranquilo: o segredo está em uma propriedade chamada display ! 🧙♂️✨
Ela define como os elementos HTML vão se comportar no layout da página, tipo se ficam um do lado do outro, empilhados, somem, ou viram super contêineres de layout! 💪
Bora descobrir os principais valores e como usar cada um na prática? 🚀
🎬 O que é display ?
É uma propriedade CSS que define o modelo de exibição de um elemento. Em outras palavras, ela responde a pergunta:
"Como esse elemento deve se encaixar na página?"
E aí começa a mágica. ✨
🔹 Valores mais usados no dia a dia
1. display: block
🧱 O elemento ocupa toda a largura da tela e quebra a linha automaticamente.
div {
display: block;
}
Ex: <div>, <p>, <h1> — são block por padrão.
2. display: inline
🧩 O elemento fica na mesma linha que outros, mas não aceita largura, altura ou margin vertical.
span {
display: inline;
}
Ex: <span>, <a>, <strong>
3. display: inline-block
button {
display: inline-block;
}
🛠️ Mesma vibe do inline, mas com superpoderes: aceita largura, altura e margem!
4. display: none
🙈 O elemento some completamente do layout. Não ocupa espaço, não aparece, nada.
.modal-fechada {
display: none;
}
Muito usado com JavaScript para esconder/mostrar coisas como modais e menus.
🧲 Agora sim: display: flex (o queridinho dos devs)
Esse é um dos modelos mais usados pra criar layouts responsivos e bonitos sem dor de cabeça.
.container {
display: flex;
}
➡️ Isso transforma o elemento .container em um contêiner flexível. Seus filhos agora podem ser alinhados de várias formas:
🎮 Propriedades que funcionam com flex:
- flex-direction: muda a direção dos filhos (row, column, etc.)
- justify-content: alinha no eixo principal (ex: esquerda, centro, entre os itens)
- align-items: alinha no eixo cruzado (vertical, na maioria dos casos)
- gap: adiciona espaço entre os itens
.container {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
gap: 20px;
}
🔧 Resultado: os elementos filhos são organizados em linha, com espaçamento, centralização e tudo sob controle!
🔲 E o poderoso display: grid?
Se o flex é um organizador de fila, o grid é um organizador de colunas e linhas, tipo uma tabela invisível que você monta como quiser! 🧮
.container {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
}
➡️ Isso cria duas colunas iguais dentro da .container, com espaço entre os elementos!
💡 Propriedades que funcionam com grid:
- grid-template-columns: define o número e tamanho das colunas
- grid-template-rows: define o número e tamanho das linhas
- gap: espaço entre colunas e linhas
- grid-column / grid-row: permite um item ocupar várias colunas ou linhas
🔧 Resultado: os itens são automaticamente organizados em 3 colunas, com controle total do layout!
📌 Resumo dos principais displays
- 🧱 block → Quebra linha e ocupa toda a largura.
- 🧩 inline → Fica na mesma linha, sem controle de tamanho.
- ⚙️ inline-block → Linha + controle de altura/largura/margem.
- 👻 none → Some completamente do layout.
- 🧭 flex → Organiza filhos em linha/coluna com alinhamentos.
- 🧮 grid → Cria layout em grade com colunas e linhas.
🚀 Por que aprender display é importante?
Porque é com ele que você consegue controlar como os elementos aparecem e se organizam na tela. Saber usar flex e grid vai te dar superpoderes pra criar qualquer layout moderno, bonito e adaptável! 💪📱💻
