Cara memusatkan div di CSS

 (joshwcomeau.com)
5 poin oleh GN⁺ 2024-02-14 | 3 komentar | Bagikan ke WhatsApp
  • Pemusatan di CSS bukan lagi satu trik tunggal; sekarang ini soal memilih antara Flow, Flexbox, Positioned layout, CSS Grid, dan text-align tergantung apakah elemen berada di dalam alur dokumen, melayang, atau jumlahnya lebih dari satu
  • Untuk menempatkan satu elemen di tengah secara horizontal, pendekatan Flow layout dengan membatasi lebar memakai max-width: fit-content lalu menerapkan margin-inline: auto memberi dampak lebih kecil pada elemen saudara
  • Flexbox memungkinkan satu atau banyak anak ditempatkan di tengah secara horizontal/vertikal hanya dengan justify-content: center dan align-items: center, dan jika anak meluap pun akan overflow secara simetris
  • Untuk UI melayang seperti modal atau banner, kombinasi position: fixed, inset: 0, pembatasan ukuran, dan margin: auto adalah pilihan yang tepat, sementara CSS Grid unggul untuk sintaks singkat dan penumpukan berlapis
  • Teks sendiri memerlukan text-align: center, bukan perataan layout, dan saat dukungan align-content pada Flow layout makin luas, kebutuhan mengganti ke Flexbox atau Grid hanya demi perataan vertikal sederhana bisa berkurang

Memusatkan horizontal dengan auto margin di Flow layout

  • Salah satu strategi lama adalah membatasi lebar elemen lalu membuat margin kiri dan kanan bernilai auto
.element {
  max-width: fit-content;
  margin-left: auto;
  margin-right: auto;
}
  • Elemen dalam Flow layout pada dasarnya mengisi ruang horizontal, jadi untuk memusatkannya terlebih dulu diperlukan pembatasan lebar
  • fit-content membuat elemen membungkus kontennya sehingga width ditentukan oleh ukuran konten seperti halnya height
  • Memakai max-width alih-alih width hanya membatasi ukuran maksimum, sehingga ketika container menyempit elemen juga bisa ikut mengecil
  • Jika hanya ada margin-left: auto, ruang sisa akan masuk ke margin kiri; jika kedua margin dibuat auto, ruang sisa dibagi rata sehingga elemen berada di tengah
.element {
  max-width: fit-content;
  margin-inline: auto;
}
  • margin-inline adalah cara modern untuk menetapkan margin-left dan margin-right ke nilai yang sama, dan dukungan browser sudah baik
  • margin-inline adalah bagian dari logical properties, jadi bekerja berdasarkan sumbu inline arah penulisan, bukan kiri-kanan semata
    • Ini memungkinkan margin diterapkan di sisi yang benar baik pada bahasa kiri-ke-kanan maupun kanan-ke-kiri
  • Pendekatan ini berguna saat Anda ingin memusatkan hanya satu anak seperti gambar di antara paragraf blog tanpa memengaruhi elemen saudara

Memusatkan satu atau banyak anak dengan Flexbox

  • Flexbox adalah mode layout yang kuat untuk menata banyak item di sepanjang sumbu utama, dan juga sering dipakai untuk pemusatan
.container {
  display: flex;
  justify-content: center;
  align-items: center;
}
  • Menggunakan justify-content: center dan align-items: center bersama-sama akan menempatkan anak di tengah secara horizontal dan vertikal
  • Walau anak tidak muat di dalam container, perataannya tetap dipertahankan, dan saat meluap pun akan overflow secara simetris
  • Banyak anak juga bisa dipusatkan, dan arah penumpukannya dikendalikan lewat flex-direction
.container {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 4px;
}
  • Cocok dijadikan pilihan default yang luas penerapannya untuk satu maupun banyak anak

Memusatkan UI melayang dengan Positioned layout

  • Elemen seperti modal, prompt, dan banner yang harus keluar dari alur dokumen normal dan melayang di atas bisa ditangani dengan Positioned layout
.element {
  position: fixed;
  inset: 0px;
  width: 12rem;
  height: 5rem;
  max-width: 100vw;
  max-height: 100dvh;
  margin: auto;
}
  • position: fixed mengunci elemen ke viewport, dan inset: 0px menetapkan top, left, right, dan bottom semuanya ke 0px
  • Jika hanya memakai inset: 0px, elemen akan berusaha mengisi seluruh viewport, jadi ukurannya harus dibatasi dengan width, height, max-width, dan max-height
  • Kombinasi ini sengaja membuat kondisi yang mustahil
    • Elemen tidak mungkin sekaligus berjarak 0px dari kiri dan kanan sambil tetap memiliki lebar 12rem
    • Mesin rendering CSS akan memprioritaskan batasan width, lalu menyelesaikan ketegangan dengan menempelkan elemen ke salah satu sisi sesuai arah bahasa
  • Menambahkan margin: auto mengubah cara browser menyelesaikan situasi itu sehingga elemen berada di tengah secara horizontal dan vertikal
  • Empat syarat yang diperlukan adalah position: fixed, inset: 0px, lebar dan tinggi yang dibatasi, serta margin: auto

  • Memusatkan hanya satu arah seperti banner bawah

    .element {
  position: fixed;
  left: 0px;
  right: 0px;
  bottom: 8px;
  width: 12rem;
  max-width: calc(
    100vw - 8px * 2
  );
  margin-inline: auto;
}
    • Dengan menghilangkan top: 0px, kondisi mustahil pada arah vertikal ikut hilang, dan elemen akan tetap menempel di bawah
    • calc(100vw - 8px * 2) membatasi lebar maksimum agar ada buffer di kedua sisi viewport
    • margin-inline: auto menyatakan niat pemusatan horizontal dengan lebih tepat

  • Elemen dengan ukuran yang tidak diketahui

    .element {
  position: fixed;
  inset: 0;
  width: fit-content;
  height: fit-content;
  margin: auto;
}
    • Saat ukuran elemen tidak bisa diketahui sebelumnya, width: fit-content dan height: fit-content dapat dipakai agar elemen membungkus kontennya
    • Batas seperti max-width: 60vw bisa ditambahkan, tetapi tidak wajib, dan elemen akan tetap berada di dalam viewport

  • Tengah yang sengaja sedikit bergeser

    • Jika satu nilai inset seperti bottom: 48px diubah, elemen akan bergeser setengah dari nilai tersebut
    • Dengan bottom: 48px, elemen akan naik 24px
    • Ini terjadi karena elemen menggantung di tengah kotak virtual di antara batas atas dan bawah
    • Jika memakai transform: translateY(-48px), elemen bisa dipindahkan tepat 48px ke atas
    • Pendekatan offset bottom memungkinkan properti transform tetap tersedia untuk animasi atau efek masuk di kemudian hari

Memusatkan dengan singkat dan menumpuk berlapis lewat CSS Grid

  • Di CSS Grid, kode pemusatan paling singkat adalah kombinasi display: grid dan place-content: center
.container {
  display: grid;
  place-content: center;
}

  • place-content adalah bentuk singkat dari justify-content dan align-content, yang menerapkan nilai yang sama pada baris dan kolom

  • Dengan pengaturan ini, sebuah sel Grid 1×1 dibuat di tengah container induk

  • Perbedaan dengan Flexbox

    • Meski tampak mirip dengan Flexbox, CSS Grid menggunakan algoritme layout yang benar-benar berbeda
    • Perbedaannya akan terlihat jika anak diberi width: 50% dan height: 50%
    • Di Flexbox, persentase dihitung berdasarkan induk .container
    • Di CSS Grid, persentase dihitung berdasarkan sel Grid
    • Jika grid-template-columns atau grid-template-rows tidak ditentukan, track Grid akan menghitung ukuran berdasarkan konten, dan akibatnya elemen bisa menjadi lebih kecil dari perkiraan
    • Dalam kasus seperti ini, Anda bisa menambahkan CSS lain untuk memperbaiki Grid, tetapi untuk pemusatan sederhana Flexbox bisa lebih mudah

  • Menumpuk banyak elemen di lokasi yang sama

    .container {
  display: grid;
  place-content: center;
}

.element {
  grid-row: 1;
  grid-column: 1;
}
    • CSS Grid memungkinkan banyak anak ditempatkan di sel yang sama
    • Jika semua .element diberi grid-row: 1 dan grid-column: 1, elemen-elemen itu akan berbagi ruang Grid yang sama dan bertumpuk depan-belakang
    • Ini tetap bisa bekerja meski ukuran anak berbeda-beda
    .container {
  display: grid;
  place-content: center;
  place-items: center;
}

.element {
  grid-row: 1;
  grid-column: 1;
}
    • Untuk menumpuk anak dengan ukuran berbeda sambil tetap terpusat, place-items: center juga diperlukan
    • place-items adalah bentuk singkat dari justify-items dan align-items, yang mengatur perataan gambar di dalam sel Grid
    • Tanpa properti ini, meski sel Grid-nya berada di tengah, gambar di dalam sel akan menumpuk di kiri atas
    • Untuk mempelajari CSS Grid lebih dalam, lihat An Interactive Guide to CSS Grid

Teks perlu diratakan terpisah dengan text-align

  • Teks perlu diperlakukan terpisah di CSS; teknik layout seperti Flexbox tidak meratakan masing-masing karakter
  • Jika sebuah paragraf dipusatkan dengan Flexbox, yang berada di tengah adalah blok paragrafnya, sementara karakter di dalam paragraf tetap rata kiri
  • Untuk memusatkan teks itu sendiri, gunakan text-align: center
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

Masa depan Flow layout: align-content

  • Di Flow layout, pemusatan horizontal bisa dilakukan dengan auto margin, tetapi untuk pemusatan vertikal selama ini dibutuhkan mode layout lain seperti Flexbox atau Grid
  • Per awal 2024, vendor browser sedang mengimplementasikan align-content di Flow layout
  • Perilaku baru ini mengontrol perataan arah block pada konten, dan saat itu hanya bisa dipakai di balik flag pada Chrome Canary dan di Safari Technical Preview
  • Demo contoh tersebut bukan perilaku Flow layout yang sesungguhnya, melainkan reproduksi dengan Flexbox setelah memeriksa perilakunya di Chrome Canary dan Safari TP
  • Fitur ini tidak menciptakan UI baru, tetapi dapat mengurangi kebutuhan berpindah ke mode layout lain hanya demi pemusatan sederhana

Panduan memilih sesuai situasi

  • Untuk memusatkan satu elemen secara horizontal tanpa memengaruhi elemen saudara, gunakan strategi Flow layout auto margin
  • Untuk UI melayang seperti modal atau banner, tempatkan di tengah dengan Positioned layout dan auto margin
  • Jika ingin menumpuk beberapa elemen di lokasi yang sama sambil tetap terpusat, CSS Grid adalah pilihan yang tepat
  • Untuk memusatkan teks, gunakan text-align, dan bisa dipakai bersama cara pemusatan lainnya
  • Untuk sebagian besar situasi lainnya, Flexbox adalah pilihan paling serbaguna
    • Bisa menangani satu atau banyak anak
    • Bisa memusatkan secara horizontal maupun vertikal
    • Tetap bisa digunakan baik saat anak berada di dalam container maupun meluap keluar

Bacaan terkait

3 komentar

 
v08zbv8fvlkjasdflkj 2024-02-15

Kalau dipikir-pikir, mendadak jadi terasa mengganggu juga kalau artikel di GeekNews tidak rata tengah huhu haha
 
joyfui 2024-02-14

Saya sering memakai place-items: center;, ternyata masih ada beberapa cara lain juga.
 
GN⁺ 2024-02-14
Opini Hacker News

  • Karena komentar lain mengomentari komentar itu sendiri, saya ikut nimbrung: menurut saya meme perataan tengah CSS kebanyakan berarti “cara menaruh satu elemen tepat di tengah elemen lain”
    Dari sudut pandang implementasi, benar bahwa perataan tengah itu sulit dan bisa punya beberapa makna, tetapi bagi generasi GeoCities atau AngelFire, ini sulit diterima karena dengan HTML pada era 90-an pun kita bisa menaruh hello tepat di tengah kotak kuning 600x600 tanpa masalah
    Alat baru yang katanya lebih baik ternyata tidak bisa melakukan pekerjaan standar yang sebelumnya sudah bisa dilakukan, jadi itu menyebalkan, dan karena itu layout tabel terus dipakai sampai akhir 2000-an. Saya suka CSS, tetapi ini mungkin semacam sindrom Stockholm
    Saya terkejut valign tetap berfungsi di Chromium meski tidak ada, dan saya tidak tahu apakah ini perubahan baru-baru ini

    • Persis seperti yang dikatakan, menaruh hello di tengah kotak kuning 600x600 sudah mungkin sejak versi pertama CSS. Misalnya, atribut HTML valign berpadanan dengan properti CSS vertical-align pada kotak inline, inline-block, dan table-cell
      Namun berdasarkan pengalaman, cukup banyak orang yang bernostalgia ingin memakai tabel saja atau mengeluh bahwa CSS terbatas dan membingungkan, sebenarnya tidak banyak berusaha mempelajari bagaimana CSS bekerja. Penulis setidaknya menyadari hal itu
    • Di Firefox juga berfungsi tanpa atribut "valign". Namun saat memakai tabel tanpa layout tetap, saya selalu melihat perbedaan halus di antara tiga browser utama, jadi secara umum saya tidak akan bergantung pada perilaku layout otomatis

  • Tulisan yang bagus, dan untuk audiens yang secara nominal teknis, reaksi di sini cukup mengejutkan. Layout halaman otomatis dan pemformatan benar-benar sulit, dan memang bisa menjadi topik disertasi doktoral[1]
    Mengharapkan kompleksitas itu diabstraksikan menjadi ekspresi sederhana seperti “lakukan sesuai maksud saya” tidak realistis
    Jika melihat situs web Gwern Branwen[2], itu nyaris seperti seni, tetapi intinya adalah pertama-tama menentukan tampilan yang diinginkan lalu membatasi tulisan agar bisa diekspresikan dalam gaya tersebut
    Sejak bergabung pada 1995 dengan startup “majalah golf pertama di web”[3], saya sudah mengamati layout halaman web, dan berkat Zen Garden serta mailing list/situs web A List Apart[4], saya jadi memahami betapa sulitnya membuat konten web yang terlihat baik di berbagai lingkungan keluaran
    Memindahkan konten semantik ke layar, kertas, atau bidang terbatas pada dasarnya adalah pemetaan atau proyeksi dari ruang asal ke sekumpulan aturan ruang tujuan, dan aturan itu mencakup batasan fisik, batasan perangkat lunak browser, serta perilaku khas masing-masing browser
    Jadi CSS terlihat kacau bagi orang yang “ingin membuat halaman web dari nol”, tetapi sebenarnya ini lebih dekat ke terlalu banyak pilihan daripada batasan yang menghalangi hal-hal yang bisa dilakukan
    [1] https://scholar.google.com/scholar?hl=en&as_sdt=0%2C5&q=thes...
    [2] https://gwern.net/
    [3] Namanya Golfweb, dan tampaknya akhirnya menjadi bagian dari CBS Sports
    [4] https://www.alistapart.com

    • Karier saya di layout web dimulai pada 1998, jadi tertinggal sekitar 3 tahun, tetapi dari seluruh pengalaman terkait, saya belum melihat apa pun yang sebaik materi Every Layout[1]. Sangat direkomendasikan
      [1] https://every-layout.dev/rudiments/boxes/
    • Masalah CSS hampir sepenuhnya adalah kompleksitas yang diciptakan sendiri. Memang layout itu sulit, tetapi saya bertanya-tanya mengapa mereka menargetkan model seperti sekarang sehingga membuatnya lebih sulit
      Khususnya, ada tujuan mengejar satu model besar yang cocok untuk semua halaman, ditambah target ala Sisifus untuk menghitung ulang layout otomatis pada setiap halaman. Jika digabung dengan tujuan untuk mencakup semua ukuran jendela, saya tidak tahu mengapa mereka mengira ini mungkin
    • Karena ingin melihat lebih banyak seni CSS, saya tidak bisa tidak menyertakan tautan ini
      https://css-art.com/the-girl-with-a-p-e-a-r-l-css-earring/
      Saya tidak tahu ada berapa div yang disejajarkan ke tengah di dalamnya
    • Dalam beberapa hari terakhir saya mencoba memaksakan layout berbasis alur dan pemisahan halaman ke dalam sistem layout berbasis Flexbox, dan itu menegaskan bahwa layout dan pemformatan memang sulit
      Terutama pada tabel yang berisi teks dan objek dengan ukuran berbeda di setiap kolom, menentukan kapan dan bagaimana memindahkan elemen ke halaman berikutnya adalah pekerjaan rumit dalam memilih heuristik yang baik
    • Saya tidak tahu bagaimana membedakan apakah ini masalah yang dibebankan sendiri atau memang masalah riset yang pada dasarnya sulit. Sebelum masuk ke pengembangan web, saya tidak pernah berpikir “layout itu sulit”, dan saat itu pun sudah ada jendela yang bisa di-scroll dan diubah ukurannya
      Di custom appkit, kontrol GTK, dan toolkit berbasis Lua yang tidak dipublikasikan, meratakan konten ke tengah atau melakukan wrapping dan alignment elemen bukanlah hal besar, jadi saya penasaran apa yang terlewat di web
      Ucapan bahwa “pilihannya saja yang melimpah” terdengar mirip dengan TMTOWTDI yang sudah lama terkubur

  • Tulisan yang bagus, dan elemen interaktifnya terutama sangat baik. Yang sangat membantu saya memahami positioning dan perataan tengah CSS beberapa tahun lalu adalah membaca tentang box model
    Memahami box model membantu menilai alur di dalam DOM, dan properti CSS display serta position juga merupakan dasar untuk mempelajari positioning. Dokumentasi MDN tersusun dengan baik
    https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_...
    https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layou...

  • “Cara menengahkan elemen” adalah pertanyaan klasik CSS, dan fakta bahwa jawabannya tidak begitu jelas sampai bisa langsung terlihat di depan mata sudah menunjukkan banyak hal. CSS lebih mirip campuran aduk-aduk yang keruh, kumpulan ala bak cuci yang dirancang bersamaan oleh banyak komite, bukan satu komite saja
    Konsep rilis nyata sudah lama ditinggalkan, dan keadaan CSS saat ini lebih mirip gabungan status dari modul-modul terpisah yang terus berubah. Ini bukan cara mengembangkan perangkat lunak, dan sebenarnya bukan cara yang baik untuk membuat apa pun

    • Saya setuju sekaligus tidak setuju. Kelompok manusia yang besar memang pada dasarnya bergerak selambat dan sekacau ini, mirip menggiring kucing
      Web dan teknologinya secara kolektif juga tidak punya arah yang jelas, jadi eksperimen yang gagal dan ketidakkonsistenan memang tak terhindarkan. Cakupannya jauh lebih luas daripada proyek rekayasa yang terencana baik dengan tujuan dan jalur yang jelas
    • Menurut saya pertanyaan soal menengahkan sering muncul karena, dari sudut pandang orang yang belajar, itu adalah pertanyaan pertama yang sangat natural
      Orang yang ingin membuat halaman web terlihat sesuai keinginan biasanya pertama-tama mempelajari ukuran teks, warna, warna latar, dan perataan; selain perataan, yang lain hampir berpadanan 1:1 dengan cara sebelum CSS
      Sebelum CSS, kalau ingin menaruh konten di tengah, cukup masukkan saja ke dalam tag, tak peduli itu teks, div, tabel, tombol, atau objek HTML lain. Banyak orang berharap CSS juga bekerja seperti dulu tanpa membedakan objek inline dan block, tetapi ketika CSS tidak cocok dengan prasangka itu, pertanyaan seperti ini pun muncul

  • Tulisan ini sangat bagus, terutama cara interaksinya yang luar biasa. Ada juga alat yang sejak dulu hampir selalu memberikan hasil yang diinginkan
    http://howtocenterincss.com

  • CSS butuh puluhan tahun untuk menghadirkan solusi yang sama bergunanya dengan tabel yang menaruh konten di tengah, sementara selama itu menggunakan tabel untuk layout dicela

  • Seperti banyak orang di sini, saya melihat CSS sebagai bencana total. Masalah intinya adalah instruksi style terus-menerus saling menimpa, atau gagal diam-diam tanpa efek apa pun

  • Saya suka salah satu contoh notifikasi cookie yang jujur sampai terasa brutal
    “Kami menghargai data pribadi Anda. Untuk meningkatkan pengalaman browsing Anda, kami menggunakan cookie yang menjual data ini kepada pengiklan. Ini sangat berharga”

  • Pelajaran dari sejarah penggunaan tabel untuk layout itu menarik. Tabel memiliki border, padding, dan layout berbasis sel yang tersusun dalam kolom; jika diperluas, di sekitar tabel dan sel juga diperlukan ruang kosong, yaitu margin
    Tabel adalah elemen yang sudah lama mapan dalam layout, dan sebenarnya mengandung kebijaksanaan bahwa semua elemen sampai batas tertentu seharusnya berperilaku seperti sel tabel
    Elemen harus mengikuti box model, yang bagi orang yang menangani tipografi cukup jelas, tetapi bahwa elemen juga harus tersusun dalam kolom itu tidak terlalu jelas, dan hal ini menjadi dasar Grid layout serta Bootstrap
    Saat menghadapi masalah layout lalu menyelesaikannya dengan tabel, menyadari bahwa diperlukan fitur baru yang memiliki sebagian sifat tabel tetapi tidak semuanya adalah evolusi yang wajar
    CSS menemukan hal ini, tetapi anehnya beberapa sistem seperti pengolah kata gagal menyatukan elemen di bawah box model

  • Keluhan seperti “kenapa ini masih saja sesulit ini” terasa cukup meleset. Seperti yang dikatakan tulisan itu, Flexbox menyelesaikan semua kasus sederhana untuk pemusatan secara intuitif
    Kalau tidak bisa diselesaikan dengan Flexbox, berarti yang dilakukan bukan sekadar memusatkan, melainkan sesuatu yang lebih kompleks, dan tidak tepat mengharapkan implementasinya sangat sederhana

    • Dari sudut pandang orang yang sudah lama melakukannya, sebelum Flexbox memang sulit, dan bahkan saat Flexbox belum didukung 100%, kita masih harus terus melacak penggunaan browser untuk menilai apakah sudah bisa dipakai, jadi tetap sulit
      Sekarang, justru karena caranya terlalu banyak, kompleksitasnya terasa luar biasa. Kasus memperbaiki kode lama lebih sering daripada membuat yang baru, dan kita harus menimbang kenapa CSS ditulis dengan cara tertentu, edge case apa yang akan rusak, apakah boleh diperbaiki, dan kalau tidak sederhana, solusi mana yang harus dipilih dari berbagai opsi
      Bahkan saat membaca sekilas tulisan itu, rasanya tidak intuitif. Di Flexbox pun pengaturan horizontal adalah justify-content, sedangkan pengaturan vertikal adalah align-items; nama properti CSS terlalu banyak dan terasa arbitrer, sehingga tidak lagi mudah diingat
      Pada akhirnya, perbedaannya adalah apakah kita membuat solusi kompleks dari building block yang sederhana, intuitif, dan dapat diandalkan, atau membuat solusi kompleks dari building block yang rumit, sebagian saling tumpang tindih, dan harus terus dicari ulang
      Go atau Python lebih dekat ke yang pertama, sedangkan CSS lebih dekat ke yang kedua
    • Flexbox adalah wujud yang selalu saya harapkan dari CSS; untuk waktu yang lama tidak begitu, lalu suatu hari menjadi seperti itu, dan kita akhirnya bisa meninggalkan dukungan untuk browser tanpa Flexbox. Rasanya hampir seperti bentuk final CSS
      Ada alasan mengapa orang menyukai sistem grid Bootstrap, dan Flexbox melakukan semua itu dan lebih banyak lagi langsung di dalam browser. Sulit melebih-lebihkan betapa saya menyukainya
    • Dulu, dalam kasus tertentu memang lumayan sulit, tetapi selama sekitar 10 tahun terakhir ini sudah menjadi masalah yang terselesaikan. Masih ada orang yang membicarakan pemusatan div di CSS seolah-olah berada di antara alkimia dan ilmu roket
      Itu menunjukkan mereka tidak benar-benar mengikuti perubahan CSS sedekat mereka mengikuti bagian lain dari pengembangan web, tetapi tetap nyaman membuat pernyataan seperti itu
    • Selain itu, Flexbox sudah didukung luas selama lebih dari 10 tahun. Alur komentar di sini cukup menarik
    • Benar sekali. Saat bergulat dengan Flexbox, ada baiknya mundur selangkah dan mengurainya tahap demi tahap
      Ikuti dari luar ke dalam, dari elemen induk ke elemen anak, maka semuanya jadi jauh lebih mudah. Memang butuh keterampilan, tetapi pada dasarnya ini lebih mirip aljabar elastis