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

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

Temukan flexbox

Mengubah tata letak dengan editor flexbox

Anda dapat mengubah tata letak flexbox secara visual dengan editor flexbox. Misalnya, berikut cara Anda dapat menempatkan teks <h1> di tengah halaman demo ini di 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 tombol tersebut 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. Meletakkan teks di tengah dalam container-nya
  5. Teks kini 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 badge untuk mengalihkan tampilan overlay flexbox.

ubah justify-content menjadi flex-end

Coba ubah nilai menjadi justify-content: flex-end. Overlay diubah sesuai dengan itu.

rata-rata konten: flex-end

Ikon di editor fleksibel bersifat kontekstual. Gaya peta 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 segera diperbarui.

Menyesuaikan warna overlay flexbox

Buka panel Layout, lalu scroll ke bawah ke bagian Flexbox. Anda dapat melihat semua elemen flexbox pada 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.

ubah warna overlay

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