Tantangan Flexbox

Termasuk bagian Menata dengan CSS dalam perjalanan HTML di Coddy. Pelajaran 49 dari 76.

Tantangan

Mudah

Sekarang setelah kamu menguasai dasar-dasar Flexbox, termasuk display: flex;, flex-direction, justify-content, dan align-items, saatnya menguji pengetahuanmu melalui tantangan menyeluruh. Tantangan ini akan membantumu memperkuat pemahaman tentang cara menggunakan properti-properti ini bersama-sama untuk membuat tata letak yang fleksibel dan responsif. Kamu akan menerapkan hal-hal yang telah kamu pelajari tentang setiap properti untuk membuat ulang desain tertentu.

Kamu diberi dokumen HTML dengan elemen induk (<div>) yang berisi empat elemen anak (<div>). Tugasmu adalah menggunakan properti Flexbox yang telah kamu pelajari untuk menata elemen-elemen ini agar sesuai dengan desain yang ditampilkan pada gambar di bawah:

Ikuti langkah-langkah berikut:

Tulis aturan CSS yang menargetkan elemen <div> dengan class container.
Atur properti display pada elemen .container menjadi flex untuk mengubahnya menjadi flex container.
Atur properti flex-direction pada elemen .container menjadi row-reverse untuk menyusun item flex dalam satu baris dari kanan ke kiri.
Atur properti justify-content pada elemen .container menjadi space-between untuk membagi item flex secara merata dengan ruang di antaranya.
Atur properti align-items pada elemen .container menjadi flex-end untuk meratakan item flex di ujung sumbu silang.
Tulis aturan CSS untuk menata setiap item flex (item1, item2, item3, item4) dengan warna latar belakang dan ukuran berbeda (menggunakan padding yang berbeda), seperti yang ditampilkan pada gambar.

Coba sendiri

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