Flexbox チャレンジ

CoddyのHTMLジャーニー「Styling with CSS」セクションの一部 — レッスン 49/76。

チャレンジ

簡単

display: flex;、flex-direction、justify-content、そして align-items を含む Flexbox の基本をマスターしたところで、学んだ知識を総合的なチャレンジで試してみましょう。このチャレンジは、これらのプロパティを組み合わせて柔軟でレスポンシブなレイアウトを作成する方法についての理解を深めるのに役立ちます。各プロパティについて学んだことを応用して、特定のデザインを再現してください。

4つの子要素（<div>）を含む親要素（<div>）を持つ HTML ドキュメントが用意されています。あなたのタスクは、学んだ Flexbox プロパティを使用して、以下の画像に示されているデザインに一致するようにこれらの要素をスタイリングすることです。

以下の手順に従ってください：

container クラスを持つ <div> 要素をターゲットにする CSS ルールを記述します。
.container 要素の display プロパティを flex に設定して、フレックスコンテナにします。
.container 要素の flex-direction プロパティを row-reverse に設定して、フレックスアイテムを右から左へ横一列に配置します。
.container 要素の justify-content プロパティを space-between に設定して、フレックスアイテムの間に均等なスペースを空けて配置します。
.container 要素の align-items プロパティを flex-end に設定して、フレックスアイテムを交差軸の終端に揃えます。
画像に示されているように、個々のフレックスアイテム（item1、item2、item3、item4）に異なる背景色とサイズ（異なるパディングを使用）を設定する CSS ルールを記述します。

自分で試してみよう

<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>