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 Elements.

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

Temukan flexbox CSS

Jika elemen HTML di halaman Anda menerapkan display: flex atau display: inline-flex, Anda dapat melihat badge flex di sebelahnya pada panel Elemen.

Temukan flexbox

Mengubah tata letak dengan editor flexbox

Anda dapat memodifikasi tata letak flexbox secara visual dengan editor flexbox. Misalnya, berikut adalah cara Anda memusatkan teks <h1> dari halaman demo ini dalam penampungnya <div class="container">.

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

Memeriksa tata letak flexbox

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

arahkan kursor ke elemen flexbox

Atau, Anda dapat mengklik lencana untuk mengubah tampilan overlay flexbox.

ubah konten justify menjadi flex-end

Coba ubah nilai menjadi justify-content: flex-end. Overlay tersebut pun diubah.

{i>justify-content<i}: {i>flex-end<i}

Ikon di editor flex dapat menyesuaikan konteks. Ini akan berubah sesuai dengan arah tata letak. Misalnya, saat Anda mengubah flex-direction menjadi column, ikon di editor fleksibel akan diputar. Overlay juga akan langsung diperbarui.

Menyesuaikan warna overlay flexbox

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

Panel tata letak

Anda dapat mengalihkan overlay dari setiap elemen flexbox dengan kotak centang di sebelahnya. Hal ini sama seperti mengklik badge di hierarki DOM.

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

ubah warna overlay

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