CSS justify-self özelliği

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ğ;
}

Kendi kendine deneyin

Ö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ğ;
}

Kendi kendine deneyin

Ö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ğ;
}

Kendi kendine deneyin

Ö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;
}

Kendi kendine deneyin

Ö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;
}

Kendi kendine deneyin

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
  • 'safe' içeriğin dökülmesi durumunda projenin hizalama türünü 'start' olarak ayarlar.
  • 'unsafe' hizalama değerini korur, projenin içeriği dökülse bile.
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