Desafio: 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 classeproduct-image
) quanto as informações do produto (tagdiv
com a classeproduct-info
). - Aplicar flexbox ao elemento pai identificado (a tag
div
com a classeshopping-card
). - Centralizar verticalmente os itens dentro do cartão de loja.
index.html
index.css
- Aplicar
display: flex;
ao elemento pai com a classeshopping-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.css
Obrigado pelo seu feedback!
Pergunte à IA
Pergunte à IA
Pergunte o que quiser ou experimente uma das perguntas sugeridas para iniciar nosso bate-papo
Awesome!
Completion rate improved to 2.56
Desafio: 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 classeproduct-image
) quanto as informações do produto (tagdiv
com a classeproduct-info
). - Aplicar flexbox ao elemento pai identificado (a tag
div
com a classeshopping-card
). - Centralizar verticalmente os itens dentro do cartão de loja.
index.html
index.css
- Aplicar
display: flex;
ao elemento pai com a classeshopping-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.css
Obrigado pelo seu feedback!