1
resposta

[Dúvida] Exercicio Flex-box

<div class="card">
            <!-- 1º linha -->
            <div class="card__descrição">
                <!-- 1º coluna -->
                <div class="descrição">
                    <h3 class="descrição__titulo">Talvez você também se interesse por...</h3>
                    <h2 class="descrição__titulo-livro">Angular 11 e Firebase</h2>
                    <p class="descrição__texto">Construindo uma aplicação integrada.</p>
                </div>
                <!-- 2º coluna -->
                <img src="img/Angular.svg" class="descrição__imagem">
            </div>

            <!-- 2º linha -->
            <div class="card__botões">
                <!-- 1º coluna -->
                <ul class="botões">
                    <li class="botões__item"><img src="img/Favoritos.svg”></li>
                    <li class="botões__item"><img src="img/Compras.svg"></li>
                </ul>
                <!-- 2º coluna -->
                <a href="#" class="botões__ancora">Saiba mais</a>
            </div>
        </div>

Após analisar o código acima e a disposição dos elementos na figura, ordene 3 blocos com o nome das classes que devem receber a propriedade CSS display:flex;.

|Botões| - |card__botões| - |card__descrição| - |descrição__imagem|

Não consigo fazer esse exercicio por favor me ajudem, na minha concepção seria ---> |card__descrição| |descrição__imagem| |card__botões| porem esta dando errado!!

1 resposta

Oi, Rudston, tudo bem?

As classes nas quais precisamos aplicar o display flexsão:

  • card__descrição que engloba o título geral, o título do livro uma pequena descrição e a imagem ao lado;
  • card __botõesque engloba os ícones no canto inferior esquerdo e o botão de "Saiba mais";
  • botões que atua apenas nos ícones de coração e sacola de compras;

Essas classes são os pais dos elementos mencionados acima e o display flexprecisa ser aplicado na classe pai dos elementos que queremos dispor na tela. Caso queira saber mais informações sobre o flexbox, recomendo a leitura da documentação abaixo. O texto está em inglês, mas você pode traduzir clicando com o botão direito do mouse e selecionando a opção "Traduzir para o português".

Espero ter ajudado. Caso tenha dúvidas, não hesite em postar no fórum.

Abraços!

Caso este post tenha lhe ajudado, por favor, marcar como solucionado ✓. Bons Estudos!