Flexbox (Ekran Planlaması)

Uygulamamızdaki sayfalarda yer alan bölümlerin yapılandırılmasında Flexbox yapısını kullanırız.

Flexbox yapısında 3 kısım vardır. Bunlar flexDirection, alignItems, justifyContent parametreleridir.

flexDirection

Dilediğimiz bölümün yatay ya da dikey olmasını belirtmek için flexDirection kullanabiliriz. Alanı yatay yapmak için alignItems: ‘row’, dikey yapmak için flexDirection: ‘column’ ifadelerini style kısmına ekleyebiliriz. Örnek kod ve ekran görüntüsü aşağıdaki resimlerde gösterilmiştir.

alignItems

Bölüm içerisindeki alanların konumlarını belirtmek için alignItems kullanırız. Içerideki alanların sola yaslanmasını istersek alignItems: ‘flex-start’, ortalamak istersek alignItems: ‘center’, sağa yaslamak istersek alignItems: ‘flex-end’ parametrelerini kullanabiliriz. Örnek kod ve ekran görüntüsü aşağıdaki resimlerde gösterilmiştir.

justifyContent

Bölüm içerisindeki alanların birbirleriyle olan konumlarını belirtmek için justifyContent kullanırız. Alanların birbirine yapışık olması için justifyContent: ‘flex-start’, alanların birbirine yapışık olarak bölümün ortasında olması için justifyContent: ‘center’,  alanların alttan ve üstten boşluk bırakarak bölümün solunda olması için justifyContent: ‘space-around’, alanların birbirine yapışık olarak bölümün solunda ve sonunda olması için justifyContent: ‘flex-end’, alanların bölümü tamamlayacak şekilde bölümün solunda olması için justifyContent: ‘space-between’, alanların birbirileri ve bölümün alt ve üst kısımları ile eşit mesafede boşluk bırakmak için justifyContent: ‘space-evenly’ kullanabiliriz. Örnekler aşağıda gösterilmektedir.

Flexbox demişken flex ifadesine de değinmek gerekebilir. flex ifadesini şu şekilde açıklayabiliriz. Uygulamamızdaki sayfalarda alan planlamaları yapmamız gerekebilir. Mesela profil bilgilerinin olduğu View ekranın 2/6 sı, ana alan ekranın 3/6 si, altta da  ekranın 1/6 si  büyüklüğünde reklam alanının olmasını istediğimiz durumda flex parametresini kullanabiliriz. Bunun daha iyi anlaşılabilmesi için örneğini yapalım.

Teşekkürler.