Yer eşyaları - CSS Hileleri

place-itemsCSS özellik için steno edilir align-itemsve justify-itemstek bir beyanı bunları birleştirerek, özellikleri.

Yaygın bir kullanım, Grid ile yatay ve dikey merkezleme yapmaktır:

.center-inside-of-me ( display: grid; place-items: center; )

Bu özellikler, Flexbox ve Grid mizanpajlarının tanıtılmasıyla kullanım kazanmıştır, ancak aşağıdakilere de uygulanır:

• Blok düzeyindeki kutular
• Kesinlikle konumlandırılmış kutular
• Mutlak konumlandırılmış kutuların statik konumu
• Tablo hücreleri

Sözdizimi

Özellik ikili değerleri kabul eder, ilki için align-itemsikincisi için justify-items. Tazeleme olarak, align-itemsiçeriği dikey (sütun) eksen justify-itemsboyunca hizalarken, yatay (sıra) eksen boyunca hizalar.

.item ( display: grid; place-items: start center; )

Bu yazmakla aynıdır:

.item ( display: grid; align-items: start; justify-items: center; )

Yalnızca bir değer sağlanırsa, her iki özelliği de ayarlar. Örneğin, bu:

.item ( display: grid; place-items: start; )

… Bunu yazmakla aynıdır:

.item ( display: grid; align-items: start; justify-items: start; )

Kabul Edilen Değerler

Bu özelliği ilginç kılan, kullanıldığı bağlama göre farklı davranmasıdır. Örneğin, bazı değerler yalnızca Flexbox için geçerlidir ve Izgara ayarında çalışmaz. Ek olarak, bazı değerler, align-itemsdiğerlerinin justify-itemskenar için geçerli olduğu mülk için geçerlidir .

Dahası, değerlerin kendilerinin bir dizi hizalama türüne düştüğü düşünülebilir: bağlamsal, dağıtım, konumsal (düzendeki bir alt öğeye doğrudan uygulandığında kendi kendine konumlanır) ve temel.

Rachel Andrew, değerlerin etkisini göstermeye yardımcı olan mükemmel bir Box Alignment hile sayfasına sahiptir.

Değer	Tür	Açıklama
auto	Bağlamsal	Değer, öğenin bağlamına göre buna göre ayarlanır. justify-itemsÖğenin üst öğesinin değerini kullanır . Üst öğe yoksa veya ile konumlandırılan bir öğeye uygulanırsa absolute, değer olur normal.
normal	Bağlamsal	Uygulandığı düzen bağlamının varsayılan davranışını alır. • Blok düzeyinde düzenler: start • Mutlak konumlandırma: startdeğiştirilen mutlak öğeler ve stretchdiğerleri için • Tablo düzenleri: Değer göz ardı edilir • Flexbox düzenleri: Değer göz ardı edilir • Izgara düzenleri: Davranışında stretchbir en boy oranı veya iç boyutlandırma kullanılmadıkça sevmekstart
stretch	Dağıtım	Öğeyi için dikey align-itemsve yatay olarak kabın her iki kenarına genişletir justify-items.
start	Konumsal	Tüm öğeler, kabın başlangıç ​​(sol) kenarında birbirine hizalanmıştır.
end	Konumsal	Tüm öğeler, kabın bitiş (sağ) kenarında birbirine hizalanmıştır.
center	Konumsal	Öğeler, kabın ortasına doğru yan yana hizalanır
left	Konumsal	Öğeler, kabın sol tarafına doğru yan yana hizalanır. Özellik standart bir üst, sağ, alt, sol eksene paralel değilse gibi davranır end.
right	Konumsal	Öğeler, kabın sağ tarafına doğru yan yana hizalanır. Özellik standart bir üst, sağ, alt, sol eksene paralel değilse gibi davranır start.
flex-start	Konumsal	Öğelerin startkabın başlangıç ​​kenarına doğru paketlendiği bir yalnızca esnek kutu değeri (geri döner ).
flex-end	Konumsal	Öğelerin endkabın bitiş kenarına doğru paketlendiği bir yalnızca esnek kutu değeri (geri döner ).
self-start	Kendinden Konumsal	Bir düzendeki bir öğenin, kendi başlangıç ​​tarafına göre kendisini kap kenarında hizalamasına izin verir. Temel olarak, üstte ayarlanan değerin ne olduğunu geçersiz kılar.
self-end	Kendinden Konumsal	Bir düzendeki bir öğenin, kapsayıcının konumsal değerini miras almak yerine, kendi bitiş tarafına göre kendisini kap kenarında hizalamasına izin verir. Temel olarak, üstte ayarlanan değerin ne olduğunu geçersiz kılar.
first baseline last baseline	Temel	Bir grup içindeki tüm öğeleri (yani bir satırdaki hücreler) hizalama taban çizgilerini eşleştirerek hizalar. Varsayılan firsteğer baselinekendi başına kullanılır.

Tarayıcı Desteği

Bu özellik, CSS Kutusu Hizalama Modeli Seviye 3 spesifikasyonuna dahil edilmiştir.

Tarayıcı desteği oldukça geniş ve büyük ölçüde kullanılabilir hale geldi:

• Edge 79+ (Krom Sonrası transizyon)
• Firefox 45+
• Chrome 59+
• Safari 11+

Referanslar

• CSS Kutusu Hizalama Modeli Düzey 3 - place-itemsÖzelliğin başlangıçta tanımlandığı resmi belirtim .
• Mozilla Geliştirici Ağı - Mozilla ekibinin belgeleri.
• Kutu Hizalama Hile Sayfası - Rachel Andrew'un ana hatları, hizalama terimlerini ve tanımlarını kavramak için süper yararlı bir kaynaktır.