EasyCode365EasyCode365

Aula interativa: CSS Flexbox

Esta aula é focada em prática.

Você já aprendeu as propriedades básicas do Flexbox. Aqui você vai alterá-las em passos pequenos e focados, e observar como os flex items se movem. Cada playground abaixo isola uma ideia, para que você possa aprendê-la separadamente antes de combinar tudo.

Direção e quebra de linha

flex-direction define o main axis (linha ou coluna), e flex-wrap decide se os itens ficam em uma linha ou passam para novas linhas.

flex-direction · flex-wrap

Troque o eixo principal e ative a quebra de linha. Observe os itens se reordenarem e as quebras de linha mudarem.

1
2
3
4
.flex-container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

Alinhamento em linha

Em uma linha, justify-content move os itens horizontalmente, enquanto align-items e align-content funcionam verticalmente.

justify-content · align-items · align-content

O contêiner usa flex-direction: row. Observe o alinhamento horizontal e vertical separadamente.

1
2
3
.flex-container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  align-content: center;
}

Alinhamento em coluna

Em uma coluna, os eixos mudam: justify-content funciona verticalmente, enquanto align-items e align-content funcionam horizontalmente.

justify-content · align-items · align-content

O contêiner usa flex-direction: column. Observe como os mesmos controles agora movem os itens em eixos trocados.

1
2
3
.flex-container {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  align-content: center;
}

Espaçamento e tamanho dos itens

gap adiciona espaço entre os itens, e o atalho flex controla como cada item cresce ou encolhe para dividir o espaço disponível.

gap · Flex do item

Mude o gap e como cada item se flexiona. Observe o espaçamento e como os itens dividem a linha.

1
2
3
.flex-container {
  display: flex;
  gap: 12px;
}

.flex-item {
  flex: 0 0 64px;
}

Junte tudo

Agora combine todas as propriedades em um único playground e leia o CSS completo que ele gera.

Playground de Flexbox

1
2
3
.flex-container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  align-content: center;
  gap: 12px;
  background-color: #f1f5f9;
}

.flex-item {
  flex: 0 0 64px;
}