Apa itu Flexbox?

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

Dalam CSS, tata letak Flexbox adalah alat yang ampuh untuk menyelaraskan dan membagi ruang di antara item dalam sebuah wadah secara efisien. Dengan Flexbox, kamu dapat mengatur perataan, arah, urutan, dan ukuran elemen di dalam wadah, sehingga menghasilkan tata letak yang fleksibel dan dinamis serta dapat menyesuaikan diri dengan berbagai ukuran layar dan perangkat.

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

Berikut sintaks dasar untuk membuat kontainer flex:

.container {
    display: flex;
}

display: flex;: Deklarasi ini mengubah elemen yang dipilih menjadi kontainer flex dan anak-anak langsungnya menjadi item flex.
display: inline-flex;: Membuat kontainer flex sebaris: elemen ini berperilaku seperti elemen sebaris, tetapi anak-anaknya menjadi item flex dengan kemampuan Flexbox penuh.

Setelah memiliki container flex, kamu dapat menggunakan berbagai properti Flexbox untuk mengatur tata letak item flex di dalamnya. Beberapa properti 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: Mengatur perataan item flex pada sumbu silang (misalnya, flex-start, flex-end, center, baseline, stretch).
flex-wrap: Mengatur apakah item flex akan membungkus ke beberapa baris (wrap, nowrap, wrap-reverse).
align-content: Mengatur perataan 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>) yang berisi tiga elemen anak (<div>). Tugasmu adalah menggunakan properti display: flex; untuk mengubah elemen induk menjadi kontainer flex. Ikuti langkah-langkah berikut:

Tulis aturan CSS yang menargetkan elemen <div> dengan class container.
Tetapkan properti display pada elemen .container ke 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>