04.02. Flexbox - Erdinç Uzun

Flexbox, farklı ekran boyutlarında tutarlı bir layout (düzen) sağlamak için tasarlanmıştır. Flexbox algoritması sayesinde bileşene ve çocuklarına (alt bileşenlere) bir layout sağlanmış olur.

HTML’de div etiketleri sayesinde bir düzen sağlanabiliyordu. Burada tüm olay View bileşeni üzerindedir. View bileşeni içine diğer bileşenleri ve hatta yeni bir View ekleyebilirsiniz.

Basit bir örnek ile başlayalım.

export default class App extends Component < Props > {
  render() {
    return FlexBoxLayout()    
  }
}

const FlexBoxLayout = () => (
  <View style={styles.container}>
  <View style={styles.item} />
  <View style={styles.item} />
  <View style={styles.item} />
  </View>
  );
  
  const styles = StyleSheet.create({ container: {
    flex: 1,flexDirection: 'column', 
    justifyContent: 'flex-start', alignItems: 'flex-start'},
    item: {
    backgroundColor: 'lightgoldenrodyellow', borderWidth: 1,
    borderColor: 'goldenrod', height: 150, width: 150}
    });

export default class App extends Component < Props > {

render() {

return FlexBoxLayout()

}

const FlexBoxLayout = () => (

</View>

);

const styles = StyleSheet.create({ container: {

flex: 1,flexDirection: 'column',

justifyContent: 'flex-start', alignItems: 'flex-start'},

item: {

backgroundColor: 'lightgoldenrodyellow', borderWidth: 1,

borderColor: 'goldenrod', height: 150, width: 150}

});

Öncelikle import ve props kodlarını eklemediğimi hatırlatayım. Bunları bir önceki bölümden alabilirsiniz. Bundan sonraki kodlara “export default class” kısmını da eklemeyeceğim.

Burada View 3 adet alt View bileşeni içermektedir. container ana style’da kullanıldığı için çocukları da etkiler. Yani container’ın özelliklerini alt çocuklarda alır. 3 alt View aynı styles özelliği kullanmıştır. Burada bazı özellikleri açalım:

flex: 1 -> tüm ekranın kullan
flexDirection -> flex yönünü, “column” bileşenleri dikey, “row” bileşenleri yatay yapar. Bu işlem primary axis’i belirler. Diğeri otomatikman secondary axis olur.
justifyContent -> flex-start, center, flex-end, space-around, space-between değerlerinden birini alır. primary axis’e göre işlemini yapar.
alignItems -> flex-start, center, flex-end, stretch değerlerinden birini alır. secondary axis boyunca Container içinde nasıl dağılacağını belirler.

flexDİrection, justifyContent ve alignItems değerlerini değiştirip sonuçları gözlemleyin. Ayrıca, diğer özellik değerleri ile oynayıp çıktılarına bakalım. Style etiketi üzerine direkt özellik ekleme şansınız vardır. Örneğin,

<View style={[styles.item, , { alignSelf: ‘flex-start’ }]} />

Yukarıdaki örnekte styles.item içindeki alignSelf özelliği geçersiz kılınır ve style güncellenmiş olur.

Bir uygulama yaptığımızı düşünelim ve ekranı üç farklı kısma ayırmak ve farklı renklerde yapmak istiyoruz. Hadi bir yapı tasarlayalım.

const FlexBoxLayout = () => (
  <View style={styles.container}>
  <View style={styles.item1} />
  <View style={styles.item2} />
  <View style={styles.item3} />
  </View>
  );
  
  const styles = StyleSheet.create({ 
    container: {flex: 1, flexDirection: 'column'},
    item1: {flex: 1, backgroundColor: 'powderblue'},
    item2: {flex: 5, backgroundColor: 'skyblue'},
    item3: {flex: 2, backgroundColor: 'steelblue'}
    });

const FlexBoxLayout = () => (

</View>

);

const styles = StyleSheet.create({

container: {flex: 1, flexDirection: 'column'},

item1: {flex: 1, backgroundColor: 'powderblue'},

item2: {flex: 5, backgroundColor: 'skyblue'},

item3: {flex: 2, backgroundColor: 'steelblue'}

});

Burada ilk flex tüm ekranı kaplayacağını ve direction:column yerleşim şeklini belirtir. item1, item2, item3 sırasıyla 1, 5, 2 flex değerlerine sahiptir. Örneğin yükseklik değeri 800px ise 100px, 500px ve 200px üç kısımdan oluşur. Eğer 600px ise bu sayılarla doğru orantılı olarak hesaplanır.