Bu kılavuzda, bir sayfadaki flexbox öğelerini nasıl keşfedeceğiniz, ayrıca Öğeler panelinde flexbox düzenlerini nasıl denetleyeceğiniz ve değiştireceğiniz gösterilmektedir.
Bu makalede görünen ekran görüntüleri şu web sayfasından alınmıştır: Flexbox ile bir metin öğesini ortalama.
CSS flexbox'ı keşfedin
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üzenleyicisiyle düzenleri değiştirme
Flexbox düzenlerini flexbox düzenleyicisi ile görsel olarak değiştirebilirsiniz. Örneğin, bu demo sayfasının <h1> metnini, <div class="container"> kapsayıcısında nasıl ortalayabileceğiniz aşağıda açıklanmıştır.
- Kapsayıcı öğesini inceleyin.
- Stiller bölmesinde,
display: flexbildiriminin yanında bulunan flexbox düzenleyicisi düğmesini görebilirsiniz. - flexbox düzenleyiciyi açmak için bu simgeyi 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.
- Ekrandaki metni ortalamak için
justify-content: centervealign-items: centerdüğmelerini tıklayabilirsiniz. - Metin artık ortalandı.
justify-content: centervealign-items: centerbildirimlerinin Stiller bölmesine eklendiğine dikkat edin.
Flexbox düzenini inceleme
Düzeni görselleştirmek için fareyle Öğeler panelindeki flexbox öğesinin üzerine gelebilirsiniz. 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 flexbox yer paylaşımının görüntülenmesini açıp kapatmak için rozeti tıklayabilirsiniz.
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. Düzen, düzenin yönüne göre değişir. Örneğin, flex-direction değerini column olarak değiştirdiğinizde esnek düzenleyicideki simgeler uygun şekilde döndürülür. Yer paylaşımı da hemen güncellenir.
Flexbox yer paylaşımı rengini ayarlama
Layout (Düzen) bölmesini açın ve Flexbox bölümüne ilerleyin. Sayfanın tüm flexbox öğelerini burada görüntüleyebilirsiniz.
Her flexbox öğesinin yer paylaşımını, yanındaki onay kutusunu işaretleyerek açıp kapatabilirsiniz. DOM ağacında badge işaretini tıklamanızla aynıdır.
Bunun dışında, 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ındaki bir flexbox öğesine gitmek için yanındaki seçici simgesini tıklayabilirsiniz.