justifyContent

justifyContent ile ana eksen hizalamayı öğrenirsin.

justifyContent

justifyContent çocukları ana eksen boyunca nasıl dağıtacağını belirler. flexDirection: 'row' iken ana eksen yataydır; 'column' iken dikeydir. Yaygın değerler: 'flex-start' (başa yapış), 'center' (ortala), 'space-between' (aralarını eşit aç), 'flex-end' (son yapış).

Örneğin bir düğme çubuğunda justifyContent: 'space-between' ilk düğmeyi sola, son düğmeyi sağa koyar; aralarındaki boşluğu eşit böler. Bu değerler kabın ana eksenini kontrol eder; çapraz eksen için alignItems kullanılır.

space-between ne yapar?

justifyContent: 'space-between' ilk çocuk başa, son çocuk sona yapışır; aradakılerin boşluğu eşit bölünür. Üç düğmeli bir araç çubuğunda Kaydet sola, İptal sağa, Yardım tam ortaya düşer.

Benzeri 'space-around': her çocuğa eşit boşluk verilir ama uçlardaki çocuklar kenara yarım boşlukla yaklaşır. 'space-evenly' ise tüm boşlukları (uçlar dahil) eşit yapar. Mobil tasarımda en sık 'space-between' ve 'center' kullanılır.

Uygulama Düğme çubuğu yaz

Boş StyleSheet.create bloğunu doldur. bar adında stil tanımla: flexDirection: 'row', justifyContent: 'space-between'. Bileşen <View style={styles.bar}> döndürsün ve içinde <Text>Kaydet</Text> ile <Text>İptal</Text> bulunsun.

Örnek çözümü göster

import React from 'react';
import { View, Text, StyleSheet } from 'react-native';

export default function Bar() {
  return (
    <View style={styles.bar}>
      <Text>Kaydet</Text>
      <Text>İptal</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  bar: { flexDirection: 'row', justifyContent: 'space-between' }
});

Kendini test et

Ortalama değerini yaz

<View style={{ flexDirection: 'row', justifyContent:____}}>
  <Text>A</Text>
  <Text>B</Text>
</View>

Cevabı göster

<View style={{ flexDirection: 'row', justifyContent:'center'}}>
  <Text>A</Text>
  <Text>B</Text>
</View>

Hangisi çocukları kenarlara yapıştırır?
```
justifyContent: ???
```
- 'stretch'
- 'center'
- 'flex-start'
- 'space-between'
Cevabı göster

'space-between' — space-between ilk ve son çocuğu kenarlara yapıştırır.
Değeri işlevine eşle

'flex-start'

Başa yapış
'center'

Ortala
'space-between'

Kenarlara yapış, arayı böl
'flex-end'

Sona yapış

Sıradaki ders: alignItems

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler