CSS justify-self özelliği
- Önceki sayfa justify-items
- Sonraki sayfa @keyframes
Tanım ve Kullanım
justify-self özelliği ağ hücresi içinde satır içi yönelimde ağ öğelerini hizalar.
İngilizce sayfalar için, satır içi yönelim sağdan sola, blok yönelim aşağıya doğru olur.
Bu özelliğin herhangi bir hizalama etkisi oluşturabilmesi için, ağ öğesi satır içi yönelimde kendisi etrafında kullanılabilir alan bırakmalıdır.
İpucu:Ağ öğelerini blok yöneliminde değil satır içi yönelimde hizalamak için aşağıdaki kullanın: align-self özelliği veya align-items özelliği Özellikler.
Ayrıca bkz.:
CSS Eğitimleri:CSS Grid
CSS Eğitimleri:CSS Konumlandırma
CSS Referans Kılavuzu:align-content özelliği
CSS Referans Kılavuzu:align-items özelliği
CSS Referans Kılavuzu:align-self özelliği
CSS Referans Kılavuzu:direction özelliği
CSS Referans Kılavuzu:grid özelliği
CSS Referans Kılavuzu:grid-template-columns özelliği
CSS Referans Kılavuzu:position özelliği
CSS Referans Kılavuzu:writing-mode özelliği
Ayrıca bkz.:
Örnek
Örnek 1
Ağ öğesini kendi ağ hücresinin sağında hizalayın:
.red { display: grid; justify-self: sağ; }
Örnek 2: justify-self ile justify-items karşılaştırma
Konteynerlere göre hizalama yöntemi 'ortada' olarak ayarlanmış, ağ öğesi kendisi 'sağa' hizalanmış. 'sağ' değerinin üstünlüğü vardır:
#container { display: grid; justify-items: ortada; } .blue { justify-self: sağ; }
Örnek 3: Mutlak konumlandırma yapılmış ağ öğelerine justify-self ayarlamak
Mutlak konumlandırma yapılmış ağ öğesinin hizalama yöntemini 'sağ' olarak ayarlayın:
#container { display: grid; position: relative; } .red { position: absolute; justify-self: sağ; }
Örnek 4: writing-mode
Ağ konteyner elementinin writing-mode özelliği vertical-rl olarak ayarlandığında, satır içi yönelim aşağıya doğru olur. Sonuç olarak, konteynerin başlangıcı soldan yukarıya, konteynerin sonucu sağdan aşağıya taşınır:
#container { display: grid; writing-mode: vertical-rl; } .blue { justify-self: end; }
Örnek 5: direction
Grid konteyner elemanının direction özelliği 'rtl' olarak ayarlandığında, satır içi yön sağdan sola olacaktır. Sonuç olarak, konteynerin başlangıcı sağa, konteynerin sonucu sola taşınır:
#container { display: grid; direction: rtl; } .blue { justify-self: end; }
CSS dilbilgisi
justify-self: auto|normal|stretch|konumsal hizalama|overflow-alignment|Temel hatt hizalama|initial|inherit;
Özellik değeri
Değer | Açıklama |
---|---|
auto | Öntanımlı değer. Grid konteynerinin justify-self özellik değerini miras alır. |
normal |
Yerleşim bağlamına bağlıdır, ancak size ayarlanmadığında grid öğesinin grid yerleşimindeki 'stretch' gibi davranır. Size ayarlandıysa, özellik değeri 'start' gibi davranır. |
stretch | inline-size (genişlik) ayarlanmadıysa, grid hücresini doldurmak için çekilir. |
start | Satır içi yönün başında projeleri hizalar. |
left | Projeleri sola hizalar. |
center | Projeleri merkeze hizalar. |
end | Satır içi yönün sonunda projeleri hizalar. |
right | Projeleri sağa hizalar. |
overflow-alignment |
|
Temel hatt hizalama | Element ve ebeveyn elemanının temel hattına hizalanır. |
initial | Bu özelliği öntanımlı değerine ayarlar. bkz: initial. |
inherit | Bu özelliği ebeveyn elemanından miras alır. bkz: inherit. |
Teknik ayrıntılar
Öntanımlı değer: | auto |
---|---|
Miras: | Hayır |
Animasyon yapımı: | Desteklenmiyor. bkz:Animasyonla ilgili özellikler. |
Sürüm: | CSS3 |
JavaScript dilbilgisi: | object.style.justifySelf="right" |
Tarayıcı desteği
Tablodaki rakamlar, bu özelliği tam olarak destekleyen ilk tarayıcı sürümünü belirtmektedir.
Chrome | Edge | Firefox | Safari | Opera |
---|---|---|---|---|
Chrome | IE / Edge | Firefox | Safari | Opera |
57.0 | 16.0 | 45.0 | 10.1 | 44.0 |
- Önceki sayfa justify-items
- Sonraki sayfa @keyframes