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>