Ö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-end bir 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 🙂