CSS flexbox düzenlerini inceleme ve hata ayıklama

Bu kılavuz, bir sayfadaki flexbox öğelerini keşfetmenin yanı sıra Öğeler panelindeki flexbox düzenlerini denetleme ve değiştirme işlemlerini nasıl yapacağınızı da gösterir.

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

CSS flexbox'ı keşfedin

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

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

Flexbox düzenlerini, flexbox düzenleyicisi ile görsel olarak değiştirebilirsiniz. Örneğin, bu demo sayfasındaki <h1> metnini kendi kapsayıcısının <div class="container"> içinde nasıl ortalayabileceğinizi burada görebilirsiniz.

1. Kapsayıcı öğesini inceleyin.
2. Stiller bölmesinde, display: flex bildiriminin yanında flexbox düzenleyicisi düğmesini görebilirsiniz.
3. flexbox düzenleyicisini açmak için bu simgeyi tıklayın. Düzenleyici, flexbox özelliklerinin listesini görüntüler. Her mülkün değer seçenekleri, simge düğmesi olarak gösterilir.
4. Metni ekranda ortalamak için justify-content: center ve align-items: center düğmelerini tıklayabilirsiniz.
5. Metin ortada. Stiller bölmesine justify-content: center ve align-items: center bildirimlerinin eklendiğine dikkat edin.

Flexbox düzenini inceleme

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

Alternatif olarak, rozeti tıklayarak flexbox yer paylaşımı görüntüsünü değiştirebilirsiniz.

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

Esnek düzenleyicideki simgeler bağlama duyarlıdır. Yer işareti, düzenin yönüne göre değişir. Örneğin, flex-direction özelliğini column olarak değiştirdiğinizde, esnek düzenleyici'deki simgeler uygun şekilde 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 Flexbox bölümüne gidin. Sayfanın tüm flexbox öğelerini burada görüntüleyebilirsiniz.

Yanlarındaki onay kutusuyla her bir flexbox öğesinin yer paylaşımını değiştirebilirsiniz. DOM ağacında badge öğesini tıkladığınız şekilde aynıdır.

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

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