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 yanında bir flex rozeti 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, <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 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.
- Ekrandaki metni ortalamak için
justify-content: centervealign-items: centerdüğmelerini tıklayabilirsiniz.
- Metin artık ortalandı. Stiller bölmesine
justify-content: centervealign-items: centerbeyanları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ı, öğesi, içeriğin ve öğelerinin konumunu göstermek için noktalı çizgilerle yerleştirilmiş.
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
Düzen bölmesini açıp Esnek Kutu bölümüne gidin. Sayfanın tüm flexbox öğelerini burada görüntüleyebilirsiniz.
Her bir esnek kutu öğesinin yer paylaşımını, yanındaki onay kutusunu kullanarak açabilir veya 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.