Justify Content

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

Dalam CSS, property justify-content mengatur jarak antar item flex di sepanjang sumbu utama kontainer flex. Property ini membantu menyelaraskan item dan mendistribusikan ruang ekstra saat masih ada ruang tersisa. Property ini berguna untuk memosisikan item secara horizontal (dalam baris) atau vertikal (dalam kolom), sehingga tata letak menjadi lebih fleksibel dan responsif.

Berikut sintaks dasar untuk menggunakan property justify-content:

.container {
    display: flex;
    justify-content: value;
}

value: Perataan yang diinginkan untuk item flex di sepanjang sumbu utama, yang dapat berupa salah satu dari berikut:

flex-start: Ini adalah nilai default. Item dirapatkan ke arah awal baris.

flex-end: Item-item dirapatkan ke arah ujung baris.

center: Item berada di tengah sepanjang garis.

space-between: Item tersebar merata sepanjang garis, dengan item pertama di awal dan item terakhir di akhir.

space-around: Item didistribusikan secara merata sepanjang garis, dengan ruang yang sama di sekelilingnya.

space-evenly: Item didistribusikan sehingga jarak antara dua item mana pun (dan jarak ke tepi) sama.

Contohnya:

.container-start {
    display: flex;
    justify-content: flex-start;
}

.container-center {
    display: flex;
    justify-content: center;
}

Dalam contoh ini, elemen .container-start akan meratakan item flex-nya ke awal sumbu utama, sedangkan elemen .container-center akan memusatkan item flex-nya di sepanjang sumbu utama.

Tantangan

Mudah

Kamu diberi dokumen HTML dengan dua elemen pembagi (<div>) yang masing-masing berisi tiga elemen pembagi anak (<div>). Elemen pembagi induk sudah diatur sebagai flex container menggunakan display: flex;. Tugasmu adalah menggunakan property justify-content untuk menyelaraskan item flex sepanjang sumbu utama. Ikuti langkah-langkah berikut:

Tulis aturan CSS yang menargetkan elemen <div> dengan class fruits.
Atur property justify-content dari elemen .fruits ke center untuk menengahkan item flex sepanjang sumbu utama.
Tulis aturan CSS yang menargetkan elemen <div> dengan class vegetables.
Atur property justify-content dari elemen .vegetables ke space-between untuk mendistribusikan item flex sepanjang sumbu utama.

Coba sendiri

<html>
<head>
    <title>Justify Content</title>
    <style>
        .fruits, .vegetables {
            display: flex;
        }
        /* Write CSS rules here */
    </style>
</head>
<body>
    <div class="fruits">
        <div>Apple</div>
        <div>Banana</div>
        <div>Mango</div>
    </div>
    <div class="vegetables">
        <div>Tomato</div>
        <div>Potato</div>
        <div>Cucumber</div>
    </div>
</body>
</html>