Flex Örnekleri

Örnek 1

Flex Örnekleri

import { Text, View, StyleSheet } from 'react-native';
export default function App() {
  return (
    <View style={eren.container}>
      <View style={eren.eleman1}>
        <View style={eren.elemanici1}></View>
        <View style={eren.elemanici2}></View>
      </View>

      <View style={eren.eleman2}></View>

      <View style={eren.eleman3}>
        <View style={eren.elemanici5}></View>
        <View style={eren.elemanici2}></View>
        <View style={eren.elemanici3}></View>
      </View>

      <View style={eren.eleman4}>
        <View style={eren.elemanici4}></View>
        <View style={eren.elemanici2}></View>
      </View>
      <View style={eren.eleman5}>
      <View style={eren.elemanici5}></View>
        <View style={eren.elemanici2}></View>
        <View style={eren.elemanici3}></View>
        <View style={eren.elemanici6}></View>
      </View>
    </View>
  );
}

const eren = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    backgroundColor: '#ecf0f1',

  },
  eleman1: {
    flex: 0.8,
    backgroundColor: 'purple',
    flexDirection: 'row',
  },
  eleman2: {
    flex: 1.2,
    backgroundColor: 'green',
  },
  eleman3: {
    flex: 1.2,
    backgroundColor: 'yellow',
    flexDirection: 'row',
  },
  eleman4: {
    flex: 1,
    backgroundColor: 'orange',
    flexDirection: 'row',
  },
  eleman5: {
    flex: 1,
    backgroundColor: 'green',
    flexDirection: 'row',
  },
  elemanici1: {
    flex: 1.6,
    backgroundColor: 'darkblue',
  },
  elemanici2: {
    flex: 1,
    backgroundColor: 'pink',
  },
  elemanici3: {
    flex: 1,
    backgroundColor: 'yellow',
  },
  elemanici4: {
    flex: 1,
    backgroundColor: 'orange',
  },
  elemanici5: {
    flex: 1,
    backgroundColor: 'purple',
  },
  elemanici6: {
    flex: 1,
    backgroundColor: 'gray',
  },
});

   

Farklı Metotla
import { StyleSheet, View } from 'react-native';

export default function App() {
  return (
    <View style={styles.container}>
      <View style={{flex: 1, flexDirection: "row"}}>
        <View style={{flex: 2, backgroundColor: "purple"}}></View>
        <View style={{flex: 1, backgroundColor: "magenta"}}></View>
      </View>
      <View style={{flex: 1, flexDirection: "row"}}>
        <View style={{flex: 3, backgroundColor: "green"}}></View>
      </View>
      <View style={{flex: 1, flexDirection: "row"}}>
        <View style={{flex: 1, backgroundColor: "gray"}}></View>
        <View style={{flex: 1, backgroundColor: "orange"}}></View>
        <View style={{flex: 1, backgroundColor: "yellow"}}></View>
      </View>
      <View style={{flex: 1, flexDirection: "row"}}>
        <View style={{flex: 1, backgroundColor: "lightyellow"}}></View>
        <View style={{flex: 1, backgroundColor: "lightpink"}}></View>
      </View>
      <View style={{flex: 1, flexDirection: "row"}}>
        <View style={{flex: 1, backgroundColor: "lightblue"}}></View>
        <View style={{flex: 1, backgroundColor: "lightgreen"}}></View>
        <View style={{flex: 1, backgroundColor: "bisque"}}></View>
        <View style={{flex: 1, backgroundColor: "lightgray"}}></View>
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    gap: 1,
  },
});
Örnek 2

Flex Örnekleri

 

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

export default function App() {
  return (
    <View style={arda.container}>
      <View style={[arda.subContainer, {}]}>
        <View style={[arda.birBir, { borderTopStartRadius: 40 }]}>
          <View style={arda.kutu}></View>
          <View style={arda.daire}></View>
        </View>
        <View style={[arda.birIki, { borderTopEndRadius: 40 }]}>
          <View style={arda.daire}></View>
          <View style={arda.kutu}></View>
        </View>
      </View>

      <View style={[arda.subContainer, {}]}>
        <View style={arda.ikiBir}>
          <View style={arda.daire}></View>
          <View style={arda.daire}></View>
          <View style={arda.daire}></View>
        </View>
      </View>

      <View style={[arda.subContainer, {}]}>
        <View style={arda.ucBir}>
          <View style={arda.daire}></View>
        </View>
        <View style={arda.ucIki}>
          <View style={arda.daire}></View>
        </View>
        <View style={arda.ucUc}>
          <View style={arda.daire}></View>
        </View>
      </View>

      <View style={[arda.subContainer, {}]}>
        <View style={arda.dortBir}>
          <View style={arda.daire}></View>
          <View style={arda.daire}></View>
        </View>
        <View style={arda.dortIki}>
            <View style={[arda.kutu,{marginTop:15, marginHorizontal:5}]}></View>
            <View style={[arda.kutu,{marginTop:15, marginHorizontal:5}]}></View>
            <View style={[arda.kutu,{marginTop:15, marginHorizontal:5}]}></View>
            <View style={[arda.kutu,{marginTop:15, marginHorizontal:5}]}></View>
            <View style={[arda.kutu,{marginTop:15, marginHorizontal:5}]}></View>
            <View style={[arda.kutu,{marginTop:15, marginHorizontal:5}]}></View>
        </View>
      </View>

      <View style={[arda.subContainer, {}]}>
        <View style={[arda.besBir, { borderBottomStartRadius: 40 }]}>
          <View style={arda.daire}></View>
        </View>
        <View style={arda.besIki}>
          <View style={arda.daire}></View>
        </View>
        <View style={arda.besUc}>
          <View style={arda.daire}></View>
        </View>
        <View style={[arda.besDort, { borderBottomEndRadius: 40 }]}>
          <View style={arda.daire}></View>
        </View>
      </View>
    </View>
  );
}

const arda = StyleSheet.create({
  container: {
    flex: 1,
    marginVertical: 50,
    justifyContent: 'center',
    backgroundColor: '#ffffff',
    padding: 8,
  },
  subContainer: {
    flex: 0.2,
    flexDirection: 'row',
  },
  birBir: {
    flex: 2,
    flexDirection: 'row',
    backgroundColor: '#abcdef',
    justifyContent: 'center',
    alignItems: 'center',
  },
  birIki: {
    flex: 1,
    flexDirection: 'row',
    backgroundColor: '#0e0e0e',
    justifyContent: 'center',
    alignItems: 'center',
  },
  ikiBir: {
    flex: 1,
    backgroundColor: '#11ff11',
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-around',
  },
  ucBir: {
    flex: 1,
    flexDirection: 'row',
    backgroundColor: '#68cbaf',
    justifyContent: 'center',
    alignItems: 'center',
  },
  ucIki: {
    flex: 1,
    flexDirection: 'row',
    backgroundColor: '#f0fba0',
    justifyContent: 'center',
    alignItems: 'center',
  },
  ucUc: {
    flex: 1,
    flexDirection: 'row',
    backgroundColor: '#515151',
    justifyContent: 'center',
    alignItems: 'center',
  },
  dortBir: {
    flex: 1,
    flexDirection: 'row',
    backgroundColor: '#fedcba',
    alignItems: 'center',
    justifyContent: 'space-evenly',
  },
  dortIki: {
    flex: 1,
    flexDirection:'row',
    justifyContent:'center',
    flexWrap:'wrap',
    alignItems:'middle',
    backgroundColor: '#303030',
  },
  besBir: {
    flex: 1,
    flexDirection: 'row',
    backgroundColor: '#cec179',
    justifyContent: 'space-evenly',
    alignItems: 'center',
  },
  besIki: {
    flex: 1,
    flexDirection: 'row',
    backgroundColor: '#4ab873',
    justifyContent: 'center',
    alignItems: 'flex-end',
  },
  besUc: {
    flex: 1,
    flexDirection: 'row',
    justifyContent: 'center',
    backgroundColor: '#6074e4',
    alignItems: 'flex-start',
  },
  besDort: {
    flex: 1,
    flexDirection: 'row',
    backgroundColor: '#b54d22',
    justifyContent: 'center',
    alignItems: 'flex-end',
  },
  daire: {
    width: 50,
    height: 50,
    margin: 4,
    backgroundColor: '#aaaaaa',
    borderRadius: '50%',
  },
  kutu: {
    width: 50,
    height: 50,
    backgroundColor: '#aaaaaa',
    borderRadius: '15%',
  },
});

 

Örnek 3

 

Flex Örnekleri

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



export default function App() {
  return (
    <View style={styles.body}>
    <View style={styles.container}>
      <View style={styles.box1}>
        <Text style={styles.paragraph}>
          Kutu 1
        </Text>
       
         <View style={styles.kare}>
        
        </View>
        
      </View>

      <View style={styles.box2}>
       <Text style={styles.paragraph}>
          Kutu 2
        </Text>
        <View style={styles.daire}>
        
        </View>
        
      </View>

    </View>

    <View style={styles.container}>
     

      <View style={styles.box4}>
       <Text style={styles.paragraph}>
          Kutu 4
        </Text>
        <View style={styles.container1}>
        <View style={styles.kare}>
         <Text style={styles.paragraph}>
          1
        </Text>
        </View>
        <View style={styles.kare}>
         <Text style={styles.paragraph}>
          2
        </Text>
        </View>
        <View style={styles.kare}>
         <Text style={styles.paragraph}>
          3
        </Text>
        </View>
        </View>
      </View>

    </View>

    <View style={styles.container}>
      <View style={styles.box5}>
       <Text style={styles.paragraph}>
          Kutu 5
        </Text>
          <View style={styles.container2}>
          <View style={[styles.kare, {width:40, height:40,}]}>
         <Text style={styles.paragraph}>
          1
        </Text>
        </View>
        <View style={[styles.kare, {width:40, height:40,}]}>
         <Text style={styles.paragraph}>
          2
        </Text>
        </View>
        <View style={[styles.kare, {width:40, height:40,}]}>
         <Text style={styles.paragraph}>
          3
        </Text>
        </View>
          </View>
      </View>

      <View style={styles.box6}>
       <Text style={styles.paragraph}>
          Kutu 6
        </Text>
        <View style={[styles.container2, {backgroundColor:"burlywood",}]}>
          <View style={[styles.kare, {width:30, height:30,}]}>
         <Text style={styles.paragraph}>
          1
        </Text>
        </View>
        <View style={[styles.kare, {width:30, height:30,}]}>
         <Text style={styles.paragraph}>
          2
        </Text>
        </View>
        <View style={[styles.kare, {width:30, height:30,}]}>
         <Text style={styles.paragraph}>
          3
        </Text>
        </View>
        </View>
      </View>

      

    </View>
  
    <View style={styles.container}>
      <View style={[styles.box8,{border:"2px solid black",}]}>
       <Text style={styles.paragraph}>
          Kutu 8
        </Text>
         <View style={[styles.container2,{height:"17%",}]}>
          <View style={[styles.kare, {width:25, height:25,}]}>
         <Text style={styles.paragraph}>
          1
        </Text>
        </View>
        <View style={[styles.kare, {width:25, height:25,}]}>
         <Text style={styles.paragraph}>
          2
        </Text>
        </View>
        <View style={[styles.kare, {width:25, height:25,}]}>
         <Text style={styles.paragraph}>
          3
        </Text>
        </View>
        </View>
      </View>

      <View style={[styles.box9, {border:"2px solid black",}]}>
       <Text style={styles.paragraph}>
          Kutu 9
        </Text>
        <View style={[styles.container2,{height:"17%", justifyContent: "space-between",}]}>
          <View style={[styles.kare, {width:25, height:25, marginLeft:0,}]}>
         <Text style={styles.paragraph}>
          1
        </Text>
        </View>
        <View style={[styles.kare, {width:25, height:25,}]}>
         <Text style={styles.paragraph}>
          2
        </Text>
        </View>
        <View style={[styles.kare, {width:25, height:25, marginRight:0,}]}>
         <Text style={styles.paragraph}>
          3
        </Text>
        </View>
        </View>
      
      </View>

     

    </View>

    <View style={styles.container}>
      <View style={styles.box11}>
      <View style={[styles.container2, {backgroundColor:"burlywood", justifyContent:"flex-start",}]}>
          <View style={[styles.kare, {width:20, height:20,marginTop:-25,}]}>
         <Text style={styles.paragraph}>
          1
        </Text>
        </View>
        <View style={[styles.kare, {width:20, height:20,marginTop:-25,}]}>
         <Text style={styles.paragraph}>
          2
        </Text>
        </View>
        <View style={[styles.kare, {width:20, height:20,marginTop:-25,}]}>
         <Text style={styles.paragraph}>
          3
        </Text>
        </View>
        </View>
       <Text style={[styles.paragraph, {}]}>
          Kutu 11
        </Text>
       
      </View>

      <View style={styles.box12}>
       <Text style={styles.paragraph}>
          Kutu 12
        </Text>
      <View style={[styles.container2, {backgroundColor:"burlywood", justifyContent:"flex-end", marginTop:22,}]}>
          <View style={[styles.kare, {width:20, height:20,marginTop:24,}]}>
         <Text style={styles.paragraph}>
          1
        </Text>
        </View>
        <View style={[styles.kare, {width:20, height:20,marginTop:24,}]}>
         <Text style={styles.paragraph}>
          2
        </Text>
        </View>
        <View style={[styles.kare, {width:20, height:20,marginTop:24,}]}>
         <Text style={styles.paragraph}>
          3
        </Text>
        </View>
        </View>
      
        
      </View>

      <View style={styles.box13}>
       <View style={[styles.container2, {backgroundColor:"burlywood", justifyContent:"stretch",}]}>
          <View style={[styles.kare, {width:20, height:40,marginTop:-1,}]}>
         <Text style={styles.paragraph}>
          1
        </Text>
        </View>
        <View style={[styles.kare, {width:20, height:40,marginTop:-1,}]}>
         <Text style={styles.paragraph}>
          2
        </Text>
        </View>
        <View style={[styles.kare, {width:20, height:40,marginTop:-1,}]}>
         <Text style={styles.paragraph}>
          3
        </Text>
        </View>
        </View>
       <Text style={styles.paragraph}>
          Kutu 13
        </Text>
       
      </View>

       <View style={styles.box14}>
     
         <View style={[styles.container2, {backgroundColor:"burlywood",width:"50%",height:"100%",flexDirection:"column",marginLeft:20,}]}>
          <View style={[styles.kare, {width:30, height:30,}]}>
         <Text style={styles.paragraph}>
          1
        </Text>
        </View>
        <View style={[styles.kare, {width:30, height:30,}]}>
         <Text style={styles.paragraph}>
          2
        </Text>
        </View>
        <View style={[styles.kare, {width:30, height:30,}]}>
         <Text style={styles.paragraph}>
          3
        </Text>
        </View>
        </View>
      </View>

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



export default function App() {
  return (
    <View style={styles.body}>
    <View style={styles.container}>
      <View style={styles.box1}>
        <Text style={styles.paragraph}>
          Kutu 1
        </Text>
       
         <View style={styles.kare}>
        
        </View>
        
      </View>

      <View style={styles.box2}>
       <Text style={styles.paragraph}>
          Kutu 2
        </Text>
        <View style={styles.daire}>
        
        </View>
        
      </View>

    </View>

    <View style={styles.container}>
     

      <View style={styles.box4}>
       <Text style={styles.paragraph}>
          Kutu 4
        </Text>
        <View style={styles.container1}>
        <View style={styles.kare}>
         <Text style={styles.paragraph}>
          1
        </Text>
        </View>
        <View style={styles.kare}>
         <Text style={styles.paragraph}>
          2
        </Text>
        </View>
        <View style={styles.kare}>
         <Text style={styles.paragraph}>
          3
        </Text>
        </View>
        </View>
      </View>

    </View>

    <View style={styles.container}>
      <View style={styles.box5}>
       <Text style={styles.paragraph}>
          Kutu 5
        </Text>
          <View style={styles.container2}>
          <View style={[styles.kare, {width:40, height:40,}]}>
         <Text style={styles.paragraph}>
          1
        </Text>
        </View>
        <View style={[styles.kare, {width:40, height:40,}]}>
         <Text style={styles.paragraph}>
          2
        </Text>
        </View>
        <View style={[styles.kare, {width:40, height:40,}]}>
         <Text style={styles.paragraph}>
          3
        </Text>
        </View>
          </View>
      </View>

      <View style={styles.box6}>
       <Text style={styles.paragraph}>
          Kutu 6
        </Text>
        <View style={[styles.container2, {backgroundColor:"burlywood",}]}>
          <View style={[styles.kare, {width:30, height:30,}]}>
         <Text style={styles.paragraph}>
          1
        </Text>
        </View>
        <View style={[styles.kare, {width:30, height:30,}]}>
         <Text style={styles.paragraph}>
          2
        </Text>
        </View>
        <View style={[styles.kare, {width:30, height:30,}]}>
         <Text style={styles.paragraph}>
          3
        </Text>
        </View>
        </View>
      </View>

      

    </View>
  
    <View style={styles.container}>
      <View style={[styles.box8,{border:"2px solid black",}]}>
       <Text style={styles.paragraph}>
          Kutu 8
        </Text>
         <View style={[styles.container2,{height:"17%",}]}>
          <View style={[styles.kare, {width:25, height:25,}]}>
         <Text style={styles.paragraph}>
          1
        </Text>
        </View>
        <View style={[styles.kare, {width:25, height:25,}]}>
         <Text style={styles.paragraph}>
          2
        </Text>
        </View>
        <View style={[styles.kare, {width:25, height:25,}]}>
         <Text style={styles.paragraph}>
          3
        </Text>
        </View>
        </View>
      </View>

      <View style={[styles.box9, {border:"2px solid black",}]}>
       <Text style={styles.paragraph}>
          Kutu 9
        </Text>
        <View style={[styles.container2,{height:"17%", justifyContent: "space-between",}]}>
          <View style={[styles.kare, {width:25, height:25, marginLeft:0,}]}>
         <Text style={styles.paragraph}>
          1
        </Text>
        </View>
        <View style={[styles.kare, {width:25, height:25,}]}>
         <Text style={styles.paragraph}>
          2
        </Text>
        </View>
        <View style={[styles.kare, {width:25, height:25, marginRight:0,}]}>
         <Text style={styles.paragraph}>
          3
        </Text>
        </View>
        </View>
      
      </View>

     

    </View>

    <View style={styles.container}>
      <View style={styles.box11}>
      <View style={[styles.container2, {backgroundColor:"burlywood", justifyContent:"flex-start",}]}>
          <View style={[styles.kare, {width:20, height:20,marginTop:-25,}]}>
         <Text style={styles.paragraph}>
          1
        </Text>
        </View>
        <View style={[styles.kare, {width:20, height:20,marginTop:-25,}]}>
         <Text style={styles.paragraph}>
          2
        </Text>
        </View>
        <View style={[styles.kare, {width:20, height:20,marginTop:-25,}]}>
         <Text style={styles.paragraph}>
          3
        </Text>
        </View>
        </View>
       <Text style={[styles.paragraph, {}]}>
          Kutu 11
        </Text>
       
      </View>

      <View style={styles.box12}>
       <Text style={styles.paragraph}>
          Kutu 12
        </Text>
      <View style={[styles.container2, {backgroundColor:"burlywood", justifyContent:"flex-end", marginTop:22,}]}>
          <View style={[styles.kare, {width:20, height:20,marginTop:24,}]}>
         <Text style={styles.paragraph}>
          1
        </Text>
        </View>
        <View style={[styles.kare, {width:20, height:20,marginTop:24,}]}>
         <Text style={styles.paragraph}>
          2
        </Text>
        </View>
        <View style={[styles.kare, {width:20, height:20,marginTop:24,}]}>
         <Text style={styles.paragraph}>
          3
        </Text>
        </View>
        </View>
      </View>

      <View style={styles.box13}>
       <View style={[styles.container2, {backgroundColor:"burlywood", justifyContent:"stretch",}]}>
          <View style={[styles.kare, {width:20, height:40,marginTop:-1,}]}>
         <Text style={styles.paragraph}>
          1
        </Text>
        </View>
        <View style={[styles.kare, {width:20, height:40,marginTop:-1,}]}>
         <Text style={styles.paragraph}>
          2
        </Text>
        </View>
        <View style={[styles.kare, {width:20, height:40,marginTop:-1,}]}>
         <Text style={styles.paragraph}>
          3
        </Text>
        </View>
        </View>
       <Text style={styles.paragraph}>
          Kutu 13
        </Text>
       
      </View>

       <View style={styles.box14}>
     
         <View style={[styles.container2, {backgroundColor:"burlywood",width:"50%",height:"100%",flexDirection:"column",marginLeft:20,}]}>
          <View style={[styles.kare, {width:30, height:30,}]}>
         <Text style={styles.paragraph}>
          1
        </Text>
        </View>
        <View style={[styles.kare, {width:30, height:30,}]}>
         <Text style={styles.paragraph}>
          2
        </Text>
        </View>
        <View style={[styles.kare, {width:30, height:30,}]}>
         <Text style={styles.paragraph}>
          3
        </Text>
        </View>
        </View>
      </View>
    </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection:"row",
    backgroundColor: '#ecf0f1',
    
  },
  container1: {
    width: "50%",
    height:"60%",
     flex: 1,
    flexDirection:"row",
    backgroundColor: 'aqua',
    marginTop: "auto",
    marginBottom: "auto",
     justifyContent: "flex-end",
    alignItems:"center",
  },
  container2: {
    width: "100%",
    height:"30%",
    flexDirection:"row",
    backgroundColor: 'aqua',
     justifyContent: "space-around",
    alignItems:"center",
  },
  body: {
    flex: 1,
    flexDirection:"column",
    backgroundColor: '#ecf0f1',
    padding: 8,
  },
  paragraph: {
    margin: 24,
    fontSize: 13,
    fontWeight: 'bold',
    textAlign: 'center',
    color:"red",
  },
  paragraph13: {
    marginTop:50,
    fontSize: 10,
    fontWeight: 'bold',
    textAlign: 'center',
    color:"white",
  },
  daire: {
    width:50,
    height:50,
    borderRadius:50,
    backgroundColor: "white",
    marginLeft: "auto",
    marginRight: "auto",
     border: "2px solid black",
     justifyContent: "center",
    alignItems:"center",
  },
  kare: {
    width:50,
    height:50,
    borderRadius:5,
    border: "2px solid black",
    backgroundColor: "white",
    marginLeft: "auto",
    marginRight: "auto",
    justifyContent: "center",
    alignItems:"center",
  },
  box1: {
    flex:2,
    flexDirection:"column",
    backgroundColor: "blue",
    justifyContent: "flex-end",
     textAlign: "center",
  },
  box2: {
    flex:1,
    flexDirection:"row",
    backgroundColor: "orange",
    justifyContent: "flex-end",
    alignItems:"center",
  },
   box3: {
    flex:1,
    backgroundColor: "aqua",
  },
   box4: {
      flexDirection:"row",
    flex:1,
    backgroundColor: "purple",
    justifyContent: "flex-end",
    alignItems:"center",
  },
   box5: {
    flex:2.5,
    backgroundColor: "pink",
  },
   box6: {
    flex:1,
    backgroundColor: "aquamarine",
  },
   box7: {
    flex:1,
    backgroundColor: "red",
  },
  box8: {
    flex:1,
    backgroundColor: "black",
  },
  box9: {
    flex:1,
    backgroundColor: "burlywood",
  },
  box10: {
    flex:1,
    backgroundColor: "green",
  },
   box11: {
    flex:1,
    backgroundColor: "orange",
  },
   box12: {
    flex:1,
    backgroundColor: "green",
  },
   box13: {
    flex:1,
    backgroundColor: "lime",
  },
   box14: {
    flex:1,
    backgroundColor: "brown",
  },
   
});

    </View>
    </View>
   

  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection:"row",
    backgroundColor: '#ecf0f1',
    
  },
  container1: {
    width: "50%",
    height:"60%",
     flex: 1,
    flexDirection:"row",
    backgroundColor: 'aqua',
    marginTop: "auto",
    marginBottom: "auto",
     justifyContent: "flex-end",
    alignItems:"center",
  },
  container2: {
    width: "100%",
    height:"30%",
    flexDirection:"row",
    backgroundColor: 'aqua',
     justifyContent: "space-around",
    alignItems:"center",
  },
  body: {
    flex: 1,
    flexDirection:"column",
    backgroundColor: '#ecf0f1',
    padding: 8,
  },
  paragraph: {
    margin: 24,
    fontSize: 13,
    fontWeight: 'bold',
    textAlign: 'center',
    color:"red",
  },
  paragraph13: {
    marginTop:50,
    fontSize: 10,
    fontWeight: 'bold',
    textAlign: 'center',
    color:"white",
  },
  daire: {
    width:50,
    height:50,
    borderRadius:50,
    backgroundColor: "white",
    marginLeft: "auto",
    marginRight: "auto",
     border: "2px solid black",
     justifyContent: "center",
    alignItems:"center",
  },
  kare: {
    width:50,
    height:50,
    borderRadius:5,
    border: "2px solid black",
    backgroundColor: "white",
    marginLeft: "auto",
    marginRight: "auto",
    justifyContent: "center",
    alignItems:"center",
  },
  box1: {
    flex:2,
    flexDirection:"column",
    backgroundColor: "blue",
    justifyContent: "flex-end",
     textAlign: "center",
  },
  box2: {
    flex:1,
    flexDirection:"row",
    backgroundColor: "orange",
    justifyContent: "flex-end",
    alignItems:"center",
  },
   box3: {
    flex:1,
    backgroundColor: "aqua",
  },
   box4: {
      flexDirection:"row",
    flex:1,
    backgroundColor: "purple",
    justifyContent: "flex-end",
    alignItems:"center",
  },
   box5: {
    flex:2.5,
    backgroundColor: "pink",
  },
   box6: {
    flex:1,
    backgroundColor: "aquamarine",
  },
   box7: {
    flex:1,
    backgroundColor: "red",
  },
  box8: {
    flex:1,
    backgroundColor: "black",
  },
  box9: {
    flex:1,
    backgroundColor: "burlywood",
  },
  box10: {
    flex:1,
    backgroundColor: "green",
  },
   box11: {
    flex:1,
    backgroundColor: "orange",
  },
   box12: {
    flex:1,
    backgroundColor: "green",
  },
   box13: {
    flex:1,
    backgroundColor: "lime",
  },
   box14: {
    flex:1,
    backgroundColor: "brown",
  },
   
});

Ayberk Hacı

5,036 Okunma 13/05/2025.10:48:52 04/03/2026.11:38:47

/ Yorumunuzu Ekleyin
Görsel Liste
Yükleniyor...