Haklı-öğeler - CSS Hileleri

Anonim

justify-itemsMülkiyet temelde kendi kapsamında ızgara öğelerin uyum kontrolleri CSS Kutu Hizalama Modülü bir alt özelliktir.

.element ( justify-items: center; )

justify-itemsızgara öğelerini satır (satır içi) ekseni boyunca hizalar. Özellikle, bu özellik, belirli bir konumda (örn start. centerVe end) veya bir davranışla (örn. autoVeya stretch) bir ızgara kabı (ızgaranın kendisi değil) içindeki öğeler için hizalama ayarlamanıza olanak tanır .

Ne zaman justify-itemskullanılır, aynı zamanda varsayılan ayarlar justify-selfbu kullanarak çocuk düzeyinde geçersiz kılınan olabilir ama tüm ızgara öğeler için değer justify-selfçocuğun kendisinde özellik.

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

Sözdizimi

justify-items: normal | stretch | | ? ( | left | right ) | legacy | legacy && ( left | right | center )
  • Başlangıç ​​değeri: legacy
  • Şunlar için geçerlidir: tüm öğeler
  • Devralındı: hayır
  • Hesaplanan değer: belirtildiği gibi
  • Animasyon türü: ayrık

Değerler

/* Basic keyword values */ justify-items: auto; justify-items: normal; justify-items: stretch; /* Baseline alignment */ justify-items: baseline; justify-items: first baseline; justify-items: last baseline; /* Positional alignment */ justify-items: center; justify-items: start; justify-items: end; justify-items: flex-start; justify-items: flex-end; justify-items: self-start; justify-items: self-end; justify-items: left; justify-items: right; /* Overflow alignment */ /* Used as an optional second value for positional alignment */ justify-items: safe; justify-items: unsafe; /* Legacy */ justify-items: legacy center; justify-items: legacy left; justify-items: legacy right; /* Global values */ justify-items: inherit; justify-items: initial; justify-items: unset;

Temel anahtar kelime değerleri

  • stretch: Varsayılan değer. Öğeleri, ızgara öğesi hücresinin tüm genişliğini dolduracak şekilde hizalar
  • auto:justify-items ebeveyndeki değerle aynı .
  • normal: Görebiliriz iken justify-itemsbir ızgara düzeninde en sık kullanılan, herhangi bir kutu hizalama için teknik olarak ve normaldahil olmak üzere farklı düzen bağlamında, farklı şeyler ifade eder:
    • blok düzeyinde düzenler ( start)
    • ızgara düzenleri stretch
    • flexbox (yok sayıldı)
    • tablo hücreleri (yok sayılır)
    • mutlak konumlandırılmış düzenler ( start)
    • mutlak konumlandırılmış kutular ( stretch)
    • mutlak konumlandırılmış kutuları değiştirdi ( start)
.container ( justify-items: stretch; )

Taban çizgisi hizalama değerleri

Bu, kutunun ilk veya son taban çizgisinin hizalama taban çizgisini, hizalama bağlamının karşılık gelen taban çizgisiyle hizalar.

.container ( justify-items: baseline; )
  • İçin geri dönüş hizalama first baselineolup safe start.
  • İçin geri dönüş hizalama last baselineolup safe end.
  • baselinefirst baselinetek başına kullanıldığında karşılık gelir

Aşağıdaki demoda (en iyi Firefox'ta görüntülendi), öğelerin ana eksene göre bir ızgaranın taban çizgisiyle nasıl hizalandığını görüyoruz.

Konumsal hizalama değerleri

  • start: Öğeleri hizalama kabının başlangıç ​​kenarına hizalar
  • end: Öğeleri uç kenar hizalama kabıyla hizalar
  • center: Öğeleri hizalama kabının ortasına hizalar
  • left: Hizalama kabının solundaki öğeleri hizalar
  • right: Hizalama kabının sağındaki öğeleri hizalar
  • self-start: Öğeleri her ızgara öğesi hücresinin başlangıcında hizalar
  • self-end: Her ızgara öğesi hücresinin sonundaki öğeleri hizalar
.container ( justify-items: )
.container ( justify-items: )
.container ( justify-items: center; )

Taşma hizalama değerleri

Taşma özelliği içeriği ızgaranın sınır sınırlarını aştığında bu ızgara içeriğini görüntüler belirler. Dolayısıyla, içerik hizalama kabından daha büyük olduğunda, veri kaybına neden olabilecek taşma ile sonuçlanacaktır. Bunu önlemek için safe, tarayıcıya hizalamayı değiştirmesini söyleyen değeri kullanabiliriz, böylece veri kaybı olmaz.

  • safe : Bir öğe hizalama kabından taşarsa, startmod kullanılır.
  • unsafe : Hizalama değeri, öğe boyutuna veya hizalama kabına bakılmaksızın olduğu gibi tutulur.

Eski değerler

  • legacy : Yönlü bir anahtar kelimeyle (ör. right, leftVeya center) kullanıldığında, bu anahtar kelime devralmak için alt bileşenlere iletilir. Ancak eğer alt öğe bildirirse, justify-self: auto;o legacyzaman yok sayılır, ancak yine de yönlü anahtar kelimeye saygı gösterir. Yönlü anahtar kelime sağlanmazsa, değer miras alınan değeri hesaplar. Aksi takdirde, hesaplama yapar normal.

Demo

Daha fazla bilgi

  • CSS Kutusu Hizalama Modülü Seviye 3 (Çalışma taslağı)
  • Tam Kılavuz Kılavuz
  • Tam Flexbox Kılavuzu

Tarayıcı desteği

Tarayıcı desteği justify-items, grid, flexbox, tablo hücreleri gibi çoklu düzen bağlamlarında kullanıldığından gamı ​​çalıştırır. Ancak genel olarak, grid ve flexbox destekleniyorsa, o zaman bunun da olduğunu varsayabilirsiniz justify-items.

Izgara düzeni

IE Kenar Firefox Krom Safari Opera
Hayır 16+ 45+ 57+ 10.1+ 44+
Android Chrome Android Firefox Android Tarayıcı iOS Safari Opera Mobile
81+ 45+ 81+ 10.1+ 59+
Kaynak: caniuse

Flex düzeni

IE Kenar Firefox Krom Safari Opera
Hayır 12+ 20+ 52+ 9+ 12.1+
Android Chrome Android Firefox Android Tarayıcı iOS Safari Opera Mobile
87+ 83+ 81+ 9+ 12.1+
Kaynak: caniuse

İlgili özellikler

Almanak 27 Ekim 2019 tarihinde

hizalama öğeleri

Geoff Graham