CSS flexbox düzenlerini inceleme ve hata ayıklama

Bu kılavuzda, bir sayfada flexbox öğelerini nasıl bulacağınızın yanı sıra Öğeler panelinde flexbox düzenlerini nasıl inceleyip değiştireceğiniz gösterilmektedir.

Bu makalede gösterilen ekran görüntüleri şu web sayfasından alınmıştır: Flexbox ile metin öğesini hizalama.

CSS flexbox'u keşfetme

Sayfanızdaki bir HTML öğesine display: flex veya display: inline-flex uygulandığında Öğeler panelinde öğenin yanında bir flex rozeti görürsünüz.

Flexbox'u keşfetme

Flexbox düzenleyiciyle düzenleri değiştirme

Esnek kutu düzenleyici ile esnek kutu düzenlerini görsel olarak değiştirebilirsiniz. Örneğin, bu demo sayfasının <h1> metnini kapsayıcı <div class="container"> içinde nasıl ortalayacağınızı aşağıda görebilirsiniz.

  1. Kapsayıcı öğesini inceleyin.
  2. Stiller bölmesinde, display: flex beyanının yanında flexbox düzenleyici düğmesini görebilirsiniz. flexbox düzenleyici düğmesi
  3. Flexbox düzenleyiciyi açmak için tıklayın. Düzenleyici, esnek kutu özelliklerinin listesini gösterir. Her mülkün değer seçenekleri simge düğmeleri olarak gösterilir. flexbox düzenleyici
  4. Metni ekranda ortalamayı justify-content: center ve align-items: center düğmelerini tıklayarak yapabilirsiniz. Metni kapsayıcısının ortasına getirme
  5. Metin artık ortada. Stiller bölmesine justify-content: center ve align-items: center beyanlarının eklendiğini fark edin.

Flexbox düzenini inceleme

Düzeni görselleştirmek için imleci Öğeler panelindeki flexbox öğesinin üzerine getirebilirsiniz. Yer paylaşımı, öğenin üzerinde görünür ve içeriğinin ve öğelerinin konumunu göstermek için noktalı çizgilerle düzenlenir.

fareyle bir flexbox öğesinin üzerine gelme

Alternatif olarak, ek düğmeyi tıklayarak esnek kutu yer paylaşımının görüntülenmesini değiştirebilirsiniz.

justify-content değerini flex-end olarak değiştirin.

Değeri justify-content: flex-end olarak değiştirmeyi deneyin. Yer paylaşımı buna göre değiştirilir.

justify-content: flex-end

Flex düzenleyici'deki simgeler bağlama duyarlıdır. Bu değer, düzen yönüne göre değişir. Örneğin, flex-direction değerini column olarak değiştirdiğinizde flex düzenleyicideki simgeler buna göre döndürülür. Yer paylaşımı da hemen güncellenir.

Flexbox yer paylaşımı rengini ayarlama

Düzen bölmesini açın ve Esnek Kutu bölümüne gidin. Sayfanın tüm flexbox öğelerini burada görebilirsiniz.

Düzen bölmesi

Her bir esnek kutu öğesinin yer paylaşımını, yanındaki onay kutusunu kullanarak açabilir veya kapatabilirsiniz. DOM ağacında badge simgesini tıklamakla aynıdır.

Bunun dışında, yer paylaşımının rengini değiştirmek için yanındaki renk simgesini tıklayabilirsiniz. Örneğin, container yer paylaşımının rengi siyah olarak değiştirilir.

Yer paylaşımı rengini değiştirme

DOM ağacındaki bir esnek kutu öğesine gitmek için öğenin yanındaki seçici simgesini tıklayabilirsiniz.