CSS flexbox düzenlerini inceleme ve hata ayıklama

Jecelyn Yeen

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, Flexbox ile metin öğesini hizalama başlıklı web sayfasından alınmıştır.

CSS flexbox'u keşfetme

Sayfanızdaki bir HTML öğesine display: flex veya display: inline-flex uygulanmışsa Öğeler panelinde ilgili öğenin yanında flex rozetini görebilirsiniz.

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

Bükülebilir kutu düzenleyici ile bükülebilir 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 bildiriminin yanında bulunan flexbox düzenleyicisi düğmesini görebilirsiniz.
3. Flexbox düzenleyiciyi açmak için tıklayın. Düzenleyici, flexbox özelliklerinin bir listesini görüntüler. Her bir özelliğin değer seçenekleri, simge düğmeleri olarak gösterilir.
4. Metni ekranda ortalamayı justify-content: center ve align-items: center düğmelerini tıklayarak yapabilirsiniz.
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, içeriğinin ve öğelerinin konumunu göstermek için noktalı çizgilerle yerleştirilmiş olarak görünür.

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

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

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.

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.

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