Desafio de Flex Box

Parte da seção Styling with CSS do Journey de HTML da Coddy — lição 49 de 76.

Desafio

Fácil

Agora que você dominou os fundamentos do Flexbox, incluindo display: flex;, flex-direction, justify-content e align-items, é hora de colocar seu conhecimento à prova com um desafio abrangente. Este desafio ajudará você a consolidar seu entendimento sobre como usar essas propriedades juntas para criar layouts flexíveis e responsivos. Você aplicará o que aprendeu sobre cada propriedade para recriar um design específico.

Você recebeu um documento HTML com uma divisão pai (<div>) que contém quatro divisões filhas (<div>). Sua tarefa é usar as propriedades Flexbox que você aprendeu para estilizar esses elementos para corresponder ao design mostrado na imagem abaixo:

Siga os passos abaixo:

Escreva uma regra CSS que tenha como alvo o elemento <div> com a classe container.
Defina a propriedade display do elemento .container como flex para transformá-lo em um contêiner flex.
Defina a propriedade flex-direction do elemento .container como row-reverse para organizar os itens flex em uma linha da direita para a esquerda.
Defina a propriedade justify-content do elemento .container como space-between para distribuir os itens flex uniformemente com espaço entre eles.
Defina a propriedade align-items do elemento .container como flex-end para alinhar os itens flex ao final do eixo transversal.
Escreva regras CSS para estilizar os itens flex individuais (item1, item2, item3, item4) com diferentes cores de fundo e tamanhos (usando diferentes preenchimentos) como mostrado na imagem.

Experimente você mesmo

<html>
<head>
    <title>Flex Box Challenge</title>
    <style>
        /* Write CSS rules here */
    </style>
</head>
<body>
    <div class="container">
        <div class="item1">Item 1</div>
        <div class="item2">Item 2</div>
        <div class="item3">Item 3</div>
        <div class="item4">Item 4</div>
    </div>
</body>
</html>