flex
- React Native kursu
- Başlangıç
- Ders 39/116
- 5 dk
flex: 1 ile esnek boyut öğrenirsin.
flex
flex bir çocuğun kaptaki boş alanın ne kadarını alacağını belirler. flex: 1 çocuğa kalan tüm boş alanı verir. İki kardeşe de flex: 1 verilirse boş alanı ikiye bölerler; flex: 2 verilene iki katı pay düşer.
Bu özellik kabın değil çocuğun üzerinde yazılır. Örneğin bir View içindeki iki kutuyu eşit bölmek için her birine flex: 1 verirsin. Sabit genişlikli bir kenar çubuğuyla esnek ana alan istediğinde kenara width: 80, ana alana flex: 1 yazarsın.
Uygulama İki kutuyu eşit böl
Boş StyleSheet.create bloğunu doldur. row ve half stillerini tanımla. row: flexDirection: 'row'. half: flex: 1, backgroundColor: 'skyblue'. Bileşen <View style={styles.row}> döndürsün ve içinde iki <View style={styles.half} /> bulunsun.
Başlangıç kodu
import React from 'react';
import { View, StyleSheet } from 'react-native';
export default function Split() {
return (
<View>
<View />
<View />
</View>
);
}
const styles = StyleSheet.create({
// row ve half stillerini buraya ekle
});Örnek çözüm
import React from 'react';
import { View, StyleSheet } from 'react-native';
export default function Split() {
return (
<View style={styles.row}>
<View style={styles.half} />
<View style={styles.half} />
</View>
);
}
const styles = StyleSheet.create({
row: { flexDirection: 'row' },
half: { flex: 1, backgroundColor: 'skyblue' }
});Orantılı bölme
flex bir oran gibidir: çocukların flex değerleri toplamı boş alanı belirler ve her çocuk payına düşeni alır. Üç kardeşe flex: 1, flex: 2, flex: 1 verirsen toplam 4 olur; ilk ve üçüncü çocuk %25, ortadaki %50 genişlik alır.
Sabit ve esnek karışık istediğinde sabit genişlik width ile, esnek kalan flex: 1 ile yazılır. Örneğin solda 80 piksellik menü, sağda kalan alanı dolduran içerik için { width: 80 } ve { flex: 1 } kullanılır.
Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 flex: 1 ne yapar?
<View style={{ flexDirection: 'row' }}>
<View style={{ flex: 1 }} />
<View style={{ flex: 1 }} />
</View>- Çocuğu 1 piksel yapar
- Kalan boş alanı alır Doğru cevap
- Yalnızca bir defalık genişlik verir
- Çocuğu gizler
Açıklama: flex: 1 çocuğa kalan tüm boş alanı verir.
2 Esnek alan değerini yaz
<View style={{ flexDirection: 'row' }}>
<View style={{ width: 80 }} />
<View style={{____: 1 }} />
</View><View style={{ flexDirection: 'row' }}>
<View style={{ width: 80 }} />
<View style={{flex: 1 }} />
</View>Açıklama: 1 kalan boş alanı alır; sabit kenar yanında esnek içerik verir.
3 flex değerini davranışına eşle
| Kavram | Anlamı |
|---|---|
flex: 0 |
Esnek olmaz, sabit |
flex: 1 |
Kalan boş alanı alır |
flex: 2 |
İki kat pay alır |
width: 80 |
Sabit piksel genişlik |