Flexbox ve Grid için Yerleşim Denetleyicisi

Chrome DevTools, Öğeler panelinde DOM düğümünün yanında flex kapsayıcılarını "flex" rozetiyle işaretler. Rozete tıklamak Flexbox kaplamasını açıp kapatır; ana ekseni, çapraz ekseni, öğe sınırlarını ve boşlukları renkli çizgilerle gösterir.

Grid kapsayıcılarında "grid" rozeti gösterilir. Buna tıklamak grid kaplamasını açıp kapatır: sütunlar, satırlar ve boşluklar için renkli çizgiler görünür. Kalıcı kaplamalar (Düzen paneline sabitlenenler), görünüm alanını kaydırırken veya yeniden boyutlandırırken görünür kalır.

DevTools → Öğeler → Düzen sekmesi, sayfadaki tüm flex ve grid kapsayıcılarını listeler. Bir kapsayıcı adına tıklamak onu DOM'da seçer ve kaplamasını açıp kapatır. Kaplamanın görünümü (çizgi rengi, etiket görünürlüğü, iz boyutları) buradan yapılandırılabilir.

"İz boyutlarını göster" etkinleştirildiğinde kaplama, iz adlarını ve boyutlarını gösterir. İçsel boyutlar (auto, min-content, max-content) ve kesirli birimler (fr), çözümlenmiş piksel değerlerini gösterir; böylece fr birimlerinin kullanılabilir alanı nasıl böldüğü ortaya çıkar.

Bir flex öğesi seçin (bir flex kapsayıcısının alt öğesi). Stiller paneli, flex kısa gösteriminin açılımını gösterir: flex-grow, flex-shrink ve flex-basis. Kaplama, öğenin ana eksen boyutunu, temel boyutunu ve uygulanan büyüme veya küçülmeyi vurgular.

grid-template-areas kullanan ızgara kapsayıcılarında adlandırılmış alan kaplamaları gösterilir. Her adlandırılmış bölge etiketlenir ve farklı bir renkle belirtilir. Bu görsel gösterim, grid-area atamalarının amaçlanan yerleşim şablonuyla eşleştiğini doğrulamayı kolaylaştırır.

DevTools içindeki alt ızgara desteği, alt ızgara kapsayıcılarını belirgin biçimde işaretler. Bunların iz çizgileri, üst ızgaranın izleriyle hizalanır; kaplama bu hizalamayı görsel olarak gösterir ve alt ızgara öğelerinin üst ızgaranın koordinat sistemine katıldığını doğrular.

Hizalanmamış öğeler çoğunlukla yanlış justify-content, align-items veya align-self değerlerinden kaynaklanır. Flex/ızgara kaplaması, öğelerin eksen çizgilerine göre konumlarını gösterir. Stiller panelinde hizalama özelliklerini açıp kapatmayı deneyin ve kaplamadaki değişiklikleri gerçek zamanlı olarak gözlemleyin.

Kaplama, öğeler arasındaki boşlukları renkli bantlar olarak gösterir. Bu sayede gap değerlerini doğrulamak ve aralığın gap değerinden mi (doğru) yoksa margin değerinden mi kaynaklandığını kolayca belirlemek mümkün olur; margin, flex satırlarında beklenmedik biçimde daralabilir.

Izgara kaplaması, örtük izleri (taşan öğeler için otomatik oluşturulan) açıkça tanımlanmış izlerden (grid-template içinde tanımlanan) ayırır. Kesik çizgiler örtük izleri işaretler. İçerik beklenmedik örtük izler oluşturuyorsa kaplama, taşma düzenini hemen ortaya çıkarır.

Yerleşim Denetçisi'ni Aygıt Modu ile birlikte kullanın. Görünüm alanını yeniden boyutlandırın ve flex satır kaydırmasının ve ızgaranın auto-fill/auto-fit izlerinin gerçek zamanlı olarak nasıl yeniden akış oluşturduğunu izleyin. Bu yöntem, duyarlı yerleşim bozulmalarını tarayıcı penceresini elle yeniden boyutlandırmaktan daha erken yakalar.

DevTools ızgara kaplaması, oluşturulan sayfada görünmeyen neyi gösterir?

DevTools Flexbox ve Izgara Yerleşimi Denetçisi; eksen çizgilerini, iz boyutlarını, boşlukları, adlandırılmış alanları ve örtük izleri etkileşimli kaplamalar olarak görselleştirir. Kaplamaları yönetmek için Yerleşim paneliyle birlikte kullanıldığında, karmaşık CSS yerleşimlerinde hata ayıklamayı yalnızca CSS okumaktan daha hızlı ve sezgisel hâle getirir.