Apa itu Flexbox?

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

Dalam CSS, tata letak Flexbox adalah alat canggih yang menyediakan cara efisien untuk menyelaraskan dan membagikan ruang di antara item dalam sebuah container. Dengan Flexbox, kamu bisa mengontrol perataan, arah, urutan, dan ukuran elemen di dalam container, sehingga membuat tata letak yang fleksibel dan dinamis serta menyesuaikan dengan berbagai ukuran layar dan perangkat.

Untuk menggunakan Flexbox, pertama-tama kamu perlu menetapkan flex container. Caranya dengan mengatur property display pada sebuah elemen menjadi flex atau inline-flex. Setelah membuat flex container, elemen anak langsungnya otomatis menjadi flex item.

Berikut sintaks dasar untuk membuat flex container:

.container {
    display: flex;
}

display: flex;: Deklarasi ini mengubah elemen yang dipilih menjadi flex container dan anak-anak langsungnya menjadi flex items.

Setelah memiliki container flex, kamu dapat menggunakan berbagai property Flexbox untuk mengatur tata letak item flex di dalamnya. Beberapa property yang paling sering digunakan meliputi:

flex-direction: Menentukan arah item flex (row, column, row-reverse, column-reverse).
justify-content: Menyelaraskan item flex di sepanjang sumbu utama (misalnya, flex-start, flex-end, center, space-between, space-around).

align-items: Menyelaraskan item flex pada sumbu silang (misalnya, flex-start, flex-end, center, baseline, stretch).
flex-wrap: Mengatur apakah item flex perlu membungkus ke beberapa baris (wrap, nowrap, wrap-reverse).
align-content: Menyelaraskan baris flex saat ada ruang ekstra pada sumbu silang (mirip dengan justify-content, tetapi untuk beberapa baris).

Tantangan

Mudah

Kamu diberi dokumen HTML dengan sebuah elemen div (<div>) yang berisi tiga elemen div anak (<div>). Tugasmu adalah menggunakan property display: flex; untuk mengubah elemen div induk menjadi flex container. Ikuti langkah-langkah berikut:

Tulis aturan CSS yang menargetkan elemen <div> dengan class container.
Atur property display pada elemen .container menjadi flex.

Coba sendiri

<html>
<head>
    <title>What is a Flex Box?</title>
    <style>
        /* Write CSS rules here */
    </style>
</head>
<body>
    <div class="container">
        <div>Item 1</div>
        <div>Item 2</div>
        <div>Item 3</div>
    </div>
</body>
</html>