CSS Academy · Pelajaran

Justify-Content dan Align-Items

Distribusikan item pada sumbu utama dan sumbu silang menggunakan justify-content dan align-items.

Pelajaran 2 dari 413 langkah

Justify-Content dan Align-Items adalah pelajaran CSS Academy gratis di CoddyKit. Ini adalah pelajaran 2 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar CSS Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus CSS Academy mencakup 4 pelajaran total.

Dua Properti Perataan Utama

Dua properti perataan fleksibel yang paling sering digunakan adalah:

justify-content — meratakan elemen sepanjang sumbu utama
align-items — meratakan elemen sepanjang sumbu silang

justify-content: flex-start

flex-start (bawaan) merapatkan elemen ke arah awal sumbu utama. Dalam arah row, elemen diratakan ke kiri.

<nav class="nav">
    <a href="#">Home</a>
    <a href="#">About</a>
    <a href="#">Contact</a>
  </nav>

justify-content: center

Memusatkan elemen sepanjang sumbu utama. Ini adalah teknik klasik untuk pemusatan horizontal dengan tata letak fleksibel.

<div class="hero">
    <button>Get Started</button>
  </div>

justify-content: flex-end

Merapatkan elemen ke arah akhir sumbu utama (sisi kanan dalam arah row).

<div class="header">
    <button>Sign In</button>
    <button>Sign Up</button>
  </div>

justify-content: space-between

Mendistribusikan elemen dengan ruang yang sama besar di antara elemen-elemen tersebut. Elemen pertama berada di awal, elemen terakhir berada di akhir—tanpa ruang di tepi.

<nav class="nav">
    <div class="logo">Logo</div>
    <div class="links">
      <a href="#">Home</a>
      <a href="#">About</a>
    </div>
  </nav>

justify-content: space-around

Menempatkan ruang yang sama besar di sekeliling setiap elemen. Elemen di tepi mendapatkan setengah ruang dibandingkan celah di bagian dalam. Secara visual, ruang tepi berukuran setengah dari ruang di antara elemen.

justify-content: space-evenly

Semua celah (termasuk celah di tepi) berukuran sama. Berbeda dengan space-around, ruang tepi sama besar dengan celah antar-elemen.

<div class="toolbar">
    <button>Bold</button>
    <button>Italic</button>
    <button>Underline</button>
  </div>

align-items: stretch (Bawaan)

stretch (bawaan) membuat semua elemen fleksibel pada sumbu silang memenuhi ukuran silang wadah. Semua elemen dalam wadah sebaris menjadi memiliki tinggi yang sama.

<div class="row">
    <div>Short</div>
    <div>Taller content<br>spanning<br>multiple lines</div>
    <div>Mid</div>
  </div>

align-items: center

Memusatkan elemen pada sumbu silang. Dalam wadah sebaris, cara ini memusatkan elemen secara vertikal. Ini adalah solusi klasik untuk pemusatan vertikal.

<div class="card">
    <span>👤</span>
    <span>Jane Doe</span>
  </div>

align-items: flex-start dan flex-end

flex-start meratakan elemen ke tepi awal sumbu silang (bagian atas dalam baris). flex-end meratakannya ke tepi akhir sumbu silang (bagian bawah dalam baris).

<nav class="nav">
    <div>Short</div>
    <div>Taller<br>nav<br>item</div>
  </nav>

align-items: baseline

Meratakan elemen sehingga garis dasar teksnya sejajar. Berguna saat elemen memiliki ukuran fon berbeda, tetapi harus tampak sejajar secara visual.

<nav class="breadcrumb">
    <span style="font-size:12px">Home</span>
    <span style="font-size:24px">Products</span>
    <span style="font-size:16px">Item</span>
  </nav>

Pemeriksaan Singkat

Kombinasi mana yang memusatkan elemen fleksibel secara sempurna, baik secara horizontal maupun vertikal, di dalam wadahnya?

Jawab di pelajaran interaktif

Ringkasan

justify-content mendistribusikan elemen sepanjang sumbu utama dengan nilai seperti flex-start, center, dan space-between. align-items menempatkan elemen pada sumbu silang dengan stretch, center, dan flex-start. Keduanya mengendalikan perataan pada kedua sumbu.

Gratis untuk memulai

Belajar CSS dengan tutor AI — gratis

Tulis dan jalankan kode asli di browser kamu, dapatkan bantuan instan dari tutor AI 24/7, dan lanjutkan di mana kamu tinggalkan di web atau aplikasi.

Kursus: 40
Pelajaran: 159

Mulai belajar gratis Lihat kursus lengkapnya

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Justify-Content dan Align-Items” gratis?

Ya — teks lengkap “Justify-Content dan Align-Items” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus CSS Academy, upgrade ke CoddyKit PRO. Kursus CSS Academy mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “Justify-Content dan Align-Items”?

Distribusikan item pada sumbu utama dan sumbu silang menggunakan justify-content dan align-items. Kamu berlatih CSS Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai CSS Academy?

Tidak diperlukan pengalaman sebelumnya. CSS Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 2 dari 4.

Berapa lama pelajaran “Justify-Content dan Align-Items” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran CSS Academy ini?

Ya. Setiap pelajaran CSS Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

← Kembali ke CSS Academy