Prof. Leon Blog

Appearance

Exemplos Interativos: Flexbox ​

← Voltar para a aula

Playground: Propriedades do Container ​

Altere as propriedades abaixo e observe o resultado em tempo real:

Item 1
Item 2
Item 3
Item 4
.container {
  display:          flex;
  flex-direction:  row;
  flex-wrap:       nowrap;
  justify-content: flex-start;
  align-items:     stretch;
  gap:             8px;
}

flex-grow interativo ​

Altere o flex-grow de cada item para ver como o espaço é distribuído:

A
grow:1
B
grow:2
C
grow:1

align-self: sobrescrevendo align-items por item ​

O container tem align-items: center. Cada item pode sobrescrever com align-self:

center
(herda)
flex-start
(align-self)
center
(herda)
flex-end
(align-self)
stretch
(align-self)
css
.container { display: flex; align-items: center; }

.start   { align-self: flex-start; }
.end     { align-self: flex-end; }
.stretch { align-self: stretch; }

order: reordenação visual ​

Os itens aparecem na ordem do HTML, mas order altera a ordem visual sem mudar o markup:

HTML: 1
order: 0
HTML: 2
order: 0
HTML: 3
order: 0
HTML: 4
order: 0

Caso prático 1: Centralização perfeita ​

A técnica mais famosa do Flexbox: centralizar horizontal e verticalmente com apenas 3 linhas.

Perfeitamente
centralizado
justify-content: center
align-items: center
css
.container {
  display: flex;
  justify-content: center; /* eixo horizontal */
  align-items: center;     /* eixo vertical */
  height: 180px;
}

Caso prático 2: Barra de navegação ​

Logo à esquerda, links no centro, botão à direita: layout clássico de navbar.

css
.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 24px;
}

.nav-links {
  display: flex;
  gap: 24px;
  list-style: none;
}

Caso prático 3: Layout completo com sidebar ​

Header, sidebar + conteúdo principal e footer: tudo com Flexbox.

Header: display: flex + justify-content: center
Artigo: Como usar FlexboxPublicado
Artigo: CSS Grid na práticaRascunho
Artigo: Box Model explicadoPublicado
flex: 1: ocupa o espaço restante
Footer: text-align: center
css
.page    { display: flex; flex-direction: column; gap: 8px; }
.main    { display: flex; gap: 8px; }
.sidebar { flex: 0 0 180px; } /* largura fixa */
.content { flex: 1; }         /* ocupa tudo que sobrar */

Caso prático 4: Grid de cards responsivo ​

Com flex: 1 1 200px e flex-wrap: wrap, os cards se reorganizam automaticamente ao redimensionar a janela:

🎨

Design

Crie interfaces bonitas e acessíveis

💻

Código

HTML, CSS e JavaScript modernos

🚀

Deploy

Publique seu site de forma rápida

📱

Responsivo

Layouts que funcionam em qualquer tela

⚡

Performance

Sites rápidos e otimizados

🔒

Segurança

Boas práticas de segurança web

css
.cards {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.card {
  flex: 1 1 200px; /* base 200px, cresce e encolhe */
}