Öncelikle burada temel 2 şeyi bilmek gerekir.Justify Content objelerimizin ana eksende (birincil) ne şekilde hizalanacağını belirtmek için kullanılır .Alignitems ise ikincil eksen üzerinde objelerimin yerleştireceğimi belirler.
Daha önceden başlattığım örneğimden devam ediyorum. Şimdi Örneğimize bakalım:
Justify Content kullanarak 3 view objemi ortaladım.
FlexDirection row özelliklik olduğu için burada Justify Content center kullandığımızda yatay olarak ortalamış oldu.
Alignitems
Şimdi Justify Content center hemde Alignitems center kullandığımız için ekranın merkezine gitmiş oldu.
Justify Content
Şimdi Justify Content temel özelliklerine yakında bakalım:
Unutmayalım ki flexDirectionayarlanmış bir kapsayıcısı (row-column ) olduğundan emin olalım.
flex-start (default) bir container alt ögelerini container’ın ana ekseninin başlangıcına hizalar.
flex-endbir container alt elemanlarını container ana eksenin ucuna hizalar.
center bir container alt itemlerini container ana kesenin ortasına hizalar.
space-between kalan alanı itemler etrafına dağıtarak itemleri container ana ekseni boyunca eşit bir şekilde ayırır.
space-around bunun between den farkı ilk ve son item’in eşit şekilde dağıtır kala itemleri kendine göre ayarlar.
space-evenly itemleri container içinde ana eksen boyunca eşit olarak dağıtın. Her bir bitişik öğe çifti, ana başlangıç kenarı ve ilk öğe ve ana uç kenar ve son öğe arasındaki boşluk tamamen aynıdır.
Alignitems
İtemleri container’ları çapraz ekseni boyunca nasıl hizalanacağını ayarlamak için kullanılır.justifyContentancak ana eksene uygulamak yerine alignItemsçapraz eksene uygulanır.
stretch( varsayılan değer ) Bir kabın altlarını height, kabın çapraz ekseniyle eşleşecek şekilde uzatın.
flex-start Bir container alt öğelerini, kabın çapraz ekseninin başlangıcına hizalayın.
flex-end Bir container altlarını, kabın çapraz ekseninin ucuna hizalayın.
center Bir container altlarını, kabın çapraz ekseninin merkezinde hizalayın.
baselineBir container alt öğelerini ortak bir taban çizgisi boyunca hizalayın. Bireysel çocuklar, ebeveynleri için referans taban çizgisi olarak belirlenebilir.
Not: stretchbir etkiye sahip, itemlerin ikincil eksen boyunca sabit bir boyuta sahip olmamalıdır. Aşağıdaki örnekte ayar , çocuklardan kaldırılana alignItems: stretchkadar hiçbir şey yapmaz width: 50.
Son olarak bu tip özellikleri en iyi anlamda yolu bi tasarım bulup onu yapmaya çalışmaktır başka türlü çok zor çünkü. her durumda bu özellikler değişkenlik gösterecektir temel olarak bilin yeterli 🙂
React Native | Justify Content Ve Alignitems
Öncelikle burada temel 2 şeyi bilmek gerekir.Justify Content objelerimizin ana eksende (birincil) ne şekilde hizalanacağını belirtmek için kullanılır .Alignitems ise ikincil eksen üzerinde objelerimin yerleştireceğimi belirler.
Daha önceden başlattığım örneğimden devam ediyorum. Şimdi Örneğimize bakalım:
Alignitems
Justify Content
Şimdi Justify Content temel özelliklerine yakında bakalım:
Unutmayalım ki
flexDirection
ayarlanmış bir kapsayıcısı (row-column ) olduğundan emin olalım.Alignitems
İtemleri container’ları çapraz ekseni boyunca nasıl hizalanacağını ayarlamak için kullanılır.
justifyContent
ancak ana eksene uygulamak yerinealignItems
çapraz eksene uygulanır.stretch
( varsayılan değer ) Bir kabın altlarınıheight
, kabın çapraz ekseniyle eşleşecek şekilde uzatın.flex-start
Bir container alt öğelerini, kabın çapraz ekseninin başlangıcına hizalayın.flex-end
Bir container altlarını, kabın çapraz ekseninin ucuna hizalayın.center
Bir container altlarını, kabın çapraz ekseninin merkezinde hizalayın.baseline
Bir container alt öğelerini ortak bir taban çizgisi boyunca hizalayın. Bireysel çocuklar, ebeveynleri için referans taban çizgisi olarak belirlenebilir.Son olarak bu tip özellikleri en iyi anlamda yolu bi tasarım bulup onu yapmaya çalışmaktır başka türlü çok zor çünkü. her durumda bu özellikler değişkenlik gösterecektir temel olarak bilin yeterli 🙂