Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.Desafio: Flexbox | Flexbox
CSS Fundamentals

Desafio: FlexboxDesafio: Flexbox

Vamos explorar o poder do flexbox criando um cartão de loja com uma imagem do produto, alguma descrição e o preço. Por padrão, todos os elementos estão empilhados em uma coluna, um abaixo do outro. No entanto, nosso objetivo é mudar esse comportamento usando flexbox.

Tarefa

Considere a seguinte estrutura HTML:

A tarefa é modificar o CSS para alcançar o seguinte:

  • Identifique o elemento pai que contém tanto a imagem do produto (tag img com a classe product-image) quanto as informações do produto (tag div com a classe product-info).
  • Aplique flexbox ao elemento pai identificado (a tag div com a classe shopping-card).
  • Centralize verticalmente os itens dentro do cartão de compras.
content
html

index.html

css

index.css

js

index.js

  • Aplique display: flex; ao elemento pai com a classe shopping-card.
  • A direção flex padrão é linha, portanto, não é necessário alterar o valor da propriedade flex-direction.
  • Para centralizar os itens verticalmente, use align-items: center;.
html

index.html

css

index.css

js

index.js

Tudo estava claro?

Seção 4. Capítulo 6
course content

Conteúdo do Curso

CSS Fundamentals

1. Introdução ao CSS

O que é CSS?Conectando HTML e CSSSeletores para Estilizar Elementos HTMLDesafio: Adicione Seus Primeiros EstilosDesafio: Adicione os Estilos utilizando o Nome da ClasseClasses Pseudo de Ação do UsuárioDesafio: Classes Pseudo de Ação do UsuárioCores do TextoTrabalho Eficaz com CSSDesafio: Variáveis em CSS

2. Estilos de Texto

Estilização de TextoFormatação de TextoDesafio: Formatação de TextoAdicionar Fontes Personalizadas à Página WebPropriedades da FonteDesafio: Fontes

3. Modelo de Caixa e Espaçamento de Elementos

Modelo de CaixaDimensionamento de CaixaAdicionar Espaço aos ElementosDesafio: Box-SizingClasses Pseudoestruturais e FuncionaisDesafio: Pseudo-Classes EstruturaisTipos de ElementosTrabalhe com Elementos de Nível de BlocoTrabalhe com Elementos InlineDesafio: Prever o Layout da Página

4. Flexbox

O que é o Flexbox?Direção FlexívelAlinhar Conteúdo HorizontalmenteAlinhar Itens VerticalmentePropriedades de Item FlexívelDesafio: FlexboxDesafio: Trabalhar com Flexbox

5. Efeitos Decorativos

Cor de FundoImagem de FundoTrabalhe com ImagensElementos Pseudo-DecorativosSombrasDesafio: Efeitos DecorativosPróximos Passos

CSS Fundamentals

Desafio: FlexboxDesafio: Flexbox

Vamos explorar o poder do flexbox criando um cartão de loja com uma imagem do produto, alguma descrição e o preço. Por padrão, todos os elementos estão empilhados em uma coluna, um abaixo do outro. No entanto, nosso objetivo é mudar esse comportamento usando flexbox.

Tarefa

Considere a seguinte estrutura HTML:

A tarefa é modificar o CSS para alcançar o seguinte:

  • Identifique o elemento pai que contém tanto a imagem do produto (tag img com a classe product-image) quanto as informações do produto (tag div com a classe product-info).
  • Aplique flexbox ao elemento pai identificado (a tag div com a classe shopping-card).
  • Centralize verticalmente os itens dentro do cartão de compras.
content
html

index.html

css

index.css

js

index.js

  • Aplique display: flex; ao elemento pai com a classe shopping-card.
  • A direção flex padrão é linha, portanto, não é necessário alterar o valor da propriedade flex-direction.
  • Para centralizar os itens verticalmente, use align-items: center;.
html

index.html

css

index.css

js

index.js

Tudo estava claro?

Seção 4. Capítulo 6
some-alt