Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Aprenda Desafio: Aplicar Conceitos de Flexbox | Dominando o Flexbox para Layouts
Fundamentos de CSS

bookDesafio: Aplicar Conceitos de Flexbox

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

Tarefa

Considere a seguinte estrutura HTML:

<div class="shopping-card">
  <img src="link-to-image" alt="Analytics Machine" class="product-image" />
  <div class="product-info">
    <h3 class="product-title">Analytics Machine</h3>
    <p class="product-description">Bio Innovation</p>
    <div class="product-price">$10.00</div>
    <button class="add-to-cart">Add to Cart</button>
  </div>
</div>

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

  • Identificar 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).
  • Aplicar flexbox ao elemento pai identificado (a tag div com a classe shopping-card).
  • Centralizar verticalmente os itens dentro do cartão de loja.
index.html

index.html

index.css

index.css

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

index.html

index.css

index.css

copy
Tudo estava claro?

Como podemos melhorá-lo?

Obrigado pelo seu feedback!

Seção 4. Capítulo 6

Pergunte à IA

expand

Pergunte à IA

ChatGPT

Pergunte o que quiser ou experimente uma das perguntas sugeridas para iniciar nosso bate-papo

Awesome!

Completion rate improved to 2.56

bookDesafio: Aplicar Conceitos de Flexbox

Deslize para mostrar o menu

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

Tarefa

Considere a seguinte estrutura HTML:

<div class="shopping-card">
  <img src="link-to-image" alt="Analytics Machine" class="product-image" />
  <div class="product-info">
    <h3 class="product-title">Analytics Machine</h3>
    <p class="product-description">Bio Innovation</p>
    <div class="product-price">$10.00</div>
    <button class="add-to-cart">Add to Cart</button>
  </div>
</div>

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

  • Identificar 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).
  • Aplicar flexbox ao elemento pai identificado (a tag div com a classe shopping-card).
  • Centralizar verticalmente os itens dentro do cartão de loja.
index.html

index.html

index.css

index.css

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

index.html

index.css

index.css

copy
Tudo estava claro?

Como podemos melhorá-lo?

Obrigado pelo seu feedback!

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