flex

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.

Örnek çözümü göster

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.

Kendini test et

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
- Yalnızca bir defalık genişlik verir
- Çocuğu gizler
Cevabı göster

Kalan boş alanı alır — flex: 1 çocuğa kalan tüm boş alanı verir.

Esnek alan değerini yaz

<View style={{ flexDirection: 'row' }}>
  <View style={{ width: 80 }} />
  <View style={{____: 1 }} />
</View>

Cevabı göster

<View style={{ flexDirection: 'row' }}>
  <View style={{ width: 80 }} />
  <View style={{flex: 1 }} />
</View>

flex değerini davranışına eşle

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

Sıradaki ders: flexWrap

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler