align-selfMülkiyet Esnek Kutu Düzeni modülünün bir alt özelliktir.
align-itemsBelirli esnek öğeler için değeri geçersiz kılmayı mümkün kılar .
align-selfMülkiyet aynı 5 değerleri kabul align-items:
flex-start: Öğenin çapraz başlangıç marjı kenarı çapraz başlangıç çizgisine yerleştirilirflex-end: Öğenin çapraz uç kenar boşluğu, çapraz uç çizgisine yerleştirilircenter: öğe çapraz eksende ortalanırbaseline: öğeler, taban çizgileri hizalanacak şekilde hizalanırstretch(varsayılan): kabı doldurmak için uzat (yine de min-genişlik / maksimum-genişliğe saygı göster)
Sözdizimi
align-self: auto | flex-start | flex-end | center | baseline | stretch .flex-item ( align-self: flex-end; )Demo
Aşağıdaki demo, align-selfdeğere bağlı olarak bir öğenin esnek kapsayıcıda kendini nasıl hizalayabileceğini gösterir :
- 1. öğe şu şekilde ayarlanmıştır:
flex-start - 2. öğe şu şekilde ayarlanmıştır:
flex-end - 3. öğe şu şekilde ayarlanmıştır:
center - 4. öğe şu şekilde ayarlanmıştır:
baseline - 5. öğe şu şekilde ayarlanmıştır:
stretch
CodePen'de CSS-Tricks (@ css-tricks) tarafından hazırlanan Pen align-self demosuna bakın.
Tarayıcı Desteği
Bu tarayıcı destek verileri, daha fazla ayrıntıya sahip olan Caniuse'den alınmıştır. Bir sayı, tarayıcının özelliği o sürümde ve sonrasında desteklediğini gösterir.
Masaüstü Bilgisayar
| Krom | Firefox | IE | Kenar | Safari |
|---|---|---|---|---|
| 21 * | 28 | 11 | 12 | 6.1 * |
Mobil / Tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 4.4 | 7.0-7.1 * |
En iyi tarayıcı desteğini elde etmek için sözdizimlerinin nasıl karıştırılacağı hakkında daha fazla bilgi için, lütfen bu makaleye (CSS Hileleri) veya bu makaleye (DevOpera) bakın.