Memeriksa dan men-debug tata letak flexbox CSS

Jecelyn Yeen

Panduan ini menunjukkan cara menemukan elemen flexbox di halaman, serta memeriksa dan mengubah tata letak flexbox di panel Elemen.

Screenshot yang muncul dalam artikel ini berasal dari halaman web ini: Memusatkan elemen teks dengan Flexbox.

Temukan flexbox CSS

Saat elemen HTML di halaman Anda menerapkan display: flex atau display: inline-flex, Anda dapat melihat badge flex di sampingnya di panel Elemen.

Menemukan flexbox

Mengubah tata letak dengan editor flexbox

Anda dapat mengubah tata letak flexbox secara visual dengan editor flexbox. Misalnya, berikut cara memusatkan teks <h1> halaman demo ini dalam penampung <div class="container">-nya.

  1. Periksa elemen penampung.
  2. Di panel Gaya, Anda dapat melihat tombol editor flexbox di samping deklarasi display: flex. tombol editor flexbox
  3. Klik untuk membuka editor flexbox. Editor menampilkan daftar properti flexbox. Setiap opsi nilai properti ditampilkan sebagai tombol ikon. editor flexbox
  4. Untuk menempatkan teks di tengah layar, Anda dapat mengklik tombol justify-content: center dan align-items: center. Menempatkan teks di tengah penampung
  5. Teks kini berada di tengah. Perhatikan bahwa deklarasi justify-content: center dan align-items: center ditambahkan di panel Gaya.

Memeriksa tata letak flexbox

Anda dapat mengarahkan kursor ke elemen flexbox di panel Elements untuk memvisualisasikan tata letak. Overlay muncul di atas elemen, yang disusun dengan garis putus-putus untuk menunjukkan posisi konten dan itemnya.

mengarahkan kursor ke elemen flexbox

Atau, Anda dapat mengklik badge untuk mengalihkan tampilan overlay flexbox.

ubah justify-content menjadi flex-end

Coba ubah nilainya menjadi justify-content: flex-end. Overlay akan diubah sesuai dengan perubahan tersebut.

justify-content: flex-end

Ikon di editor fleksibel bersifat kontekstual. Nilai ini akan berubah sesuai dengan arah tata letak. Misalnya, saat Anda mengubah flex-direction menjadi column, ikon di editor fleksibel akan diputar sebagaimana mestinya. Overlay juga akan langsung diperbarui.

Menyesuaikan warna overlay flexbox

Buka panel Layout, lalu scroll ke bawah ke bagian Flexbox. Anda dapat melihat semua elemen flexbox halaman di sini.

Panel tata letak

Anda dapat mengganti overlay di setiap elemen flexbox dengan kotak centang di sebelahnya. Sama seperti Anda mengklik badge di hierarki DOM.

Selain itu, Anda dapat mengubah warna overlay dengan mengklik ikon warna di sampingnya. Misalnya, warna overlay container diubah menjadi hitam.

mengubah warna overlay

Untuk membuka elemen flexbox di hierarki DOM, Anda dapat mengklik ikon pemilih di sampingnya.