0Pricing
CSS Academy · Pelajaran

Lebar Fleksibel dengan Persentase

Gunakan lebar berbasis persentase untuk membuat tata letak yang menyesuaikan ukuran wadahnya.

Lebar Fleksibel dengan Persentase 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.

Mengapa Lebar Fluida?

Tata letak dengan lebar tetap dalam piksel akan bermasalah pada layar yang lebih sempit daripada ukuran tetap tersebut. Lebar fluida yang menggunakan persentase membuat tata letak berskala secara proporsional terhadap ukuran wadah atau area pandang apa pun.

Dasar-Dasar Lebar Persentase

Lebar persentase bersifat relatif terhadap lebar wadah induk. Elemen anak dengan width: 50% akan selalu memiliki lebar setengah dari wadah induknya.

<div style="width:300px;border:1px dashed #999;padding:4px;">
  <div class="half-width" style="background:#4f8cff22;border:1px solid #4f8cff;">width: 50%</div>
  <div class="third-width" style="background:#ffb84d22;border:1px solid #ffb84d;">width: 33.333%</div>
</div>

Persentase dan Ukuran Kotak

Dengan box-sizing: border-box, lebar persentase mencakup jarak dalam dan garis tepi. Hal ini membuat kolom persentase mudah digunakan — 50% benar-benar setengah, berapa pun jarak dalamnya.

<div style="width:300px;border:1px dashed #999;">
  <div class="col-half" style="background:#4f8cff22;border:1px solid #4f8cff;">50% including padding/border</div>
</div>

Tata Letak Dua Kolom Fluida

Tata letak fluida sederhana berbasis float (warisan):

<div style="width:100%;overflow:auto;">
  <div class="col" style="background:#4f8cff22;border:1px solid #4f8cff;">Column A</div>
  <div class="col" style="background:#ffb84d22;border:1px solid #ffb84d;">Column B</div>
</div>

Kolom Flexbox Fluida

Menggunakan Flexbox untuk tata letak kolom fluida lebih rapi:

<div class="flex-row">
  <div class="col-main" style="background:#4f8cff22;border:1px solid #4f8cff;padding:8px;">Main (flex: 2)</div>
  <div class="col-side" style="background:#ffb84d22;border:1px solid #ffb84d;padding:8px;">Side (flex: 1)</div>
</div>

Jarak Dalam Persentase

Jarak dalam persentase selalu relatif terhadap lebar wadah induk, bukan tingginya, bahkan untuk jarak dalam atas dan bawah. Hal ini memungkinkan trik rasio aspek:

<div class="video-wrapper" style="background:linear-gradient(135deg,#4f8cff,#7ee787);"></div>

Rasio Aspek Modern

Properti aspect-ratio menggantikan trik jarak dalam untuk mempertahankan rasio aspek:

<div class="video-wrapper" style="background:linear-gradient(135deg,#4f8cff,#7ee787);"></div>

max-width dengan Tata Letak Fluida

Menggabungkan lebar persentase dengan max-width mencegah baris menjadi terlalu lebar pada layar besar:

<article class="article" style="background:#4f8cff11;border:1px solid #4f8cff;padding:8px;">Article column — 90% wide, capped at 800px, centered</article>

Masalah Tinggi Persentase

Tinggi persentase mengharuskan wadah induknya memiliki tinggi yang ditentukan. Jika wadah induk memiliki height: auto, tinggi persentase pada elemen anak juga akan dihitung menjadi auto.

Kata Kunci Ukuran Intrinsik

CSS modern menambahkan lebih banyak opsi ukuran fluida:

  • min-content: ukuran terkecil yang dapat memuat konten
  • max-content: ukuran yang dapat memuat seluruh konten dalam satu baris
  • fit-content: ukuran di antara min-content dan max-content
<span class="tag" style="background:#4f8cff22;border:1px solid #4f8cff;display:inline-block;">Tag</span>

Pola Kisi Fluida

Kisi fluida umum yang menggunakan inline-block (lama) atau CSS modern:

<div class="grid">
  <div style="background:#4f8cff22;border:1px solid #4f8cff;min-height:60px;">A</div>
  <div style="background:#ffb84d22;border:1px solid #ffb84d;min-height:60px;">B</div>
  <div style="background:#7ee78722;border:1px solid #34c759;min-height:60px;">C</div>
</div>

Pemeriksaan Singkat

Sebuah elemen induk memiliki lebar 600px. Elemen anak memiliki width: 60% dan padding: 20px (box-sizing: border-box). Berapa lebar konten elemen anak tersebut?

Ringkasan

Lebar dalam persentase menghasilkan tata letak fluida yang menyesuaikan ukurannya dengan wadah induk. Gabungkan dengan max-width untuk mencegah konten menjadi terlalu lebar. Gunakan aspect-ratio untuk media responsif. Flexbox dan Grid menangani kolom fluida dengan lebih elegan daripada kolom mengambang berbasis persentase.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Lebar Fleksibel dengan Persentase” gratis?

Ya — teks lengkap “Lebar Fleksibel dengan Persentase” 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 “Lebar Fleksibel dengan Persentase”?

Gunakan lebar berbasis persentase untuk membuat tata letak yang menyesuaikan ukuran wadahnya. 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 “Lebar Fleksibel dengan Persentase” 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

  1. Pendekatan Mobile-First vs Desktop-First
  2. Lebar Fleksibel dengan Persentase
  3. Pola Min-Width dan Max-Width
  4. Gambar Responsif dan Elemen Picture
← Kembali ke CSS Academy