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.

• 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;.