react-native
ख़ाका

flexbox

फ्लेक्सबॉक्स एक लेआउट मोड है जो किसी पृष्ठ पर तत्वों की व्यवस्था के लिए प्रदान करता है, ताकि पृष्ठ लेआउट के अलग-अलग स्क्रीन आकार और विभिन्न प्रदर्शन उपकरणों को समायोजित करने के दौरान तत्वों का अनुमान लगाया जा सके। डिफ़ॉल्ट रूप से फ्लेक्सबॉक्स एक कॉलम में बच्चों की व्यवस्था करता है। लेकिन आप इसे flexDirection: 'row' का उपयोग करके पंक्ति में बदल सकते हैं।

flexDirection

const Direction = (props)=>{
  return (
    <View style={styles.container}>
      <Box/>
      <Box/>
      <Box/>
      <View style={{flexDirection:'row'}}>
        <Box/>
        <Box/>
        <Box/>
      </View>
    </View>
  )
}

const styles = StyleSheet.create({
  container: {
    flex:1,
    backgroundColor: '#AED581',
  }
});

संरेखण अक्ष

const AlignmentAxis = (props)=>{
  return (
    <View style={styles.container}>
      <Box />
      <View style={{flex:1, alignItems:'flex-end', justifyContent:'flex-end'}}>
        <Box />
        <Box />
      </View>
      <Box />
    </View>
  )
}

const styles = StyleSheet.create({
  container: {
    flex:1,
    backgroundColor: `#69B8CC`,
  },
  text:{
    color: 'white',
    textAlign:'center'
  }
});

संरेखण

const Alignment = (props)=>{
  return (
    <View style={styles.container}>
      <Box/>
      <View style={{alignItems:'center'}}>
        <Box/>
        <View style={{flexDirection:'row'}}>
          <Box/>
          <Box/>
          <Box/>
        </View>
        <Box/>
      </View>
      <Box/>
    </View>
  )
}

const styles = StyleSheet.create({
  container: {
    flex:1,
    backgroundColor: `#69B8CC`,
  },
  text:{
    color: 'white',
    textAlign:'center'
  }
});

फ्लेक्स का आकार

const FlexSize = (props)=>{
  return (
    <View style={styles.container}>
      <View style={{flex:0.1}}>
        <Box style={{flex:0.7}}/>
        <Box style={{backgroundColor: 'yellow'}}/>
        <Box/>
        <Box style={{flex:0.3, backgroundColor: 'yellow'}}/>
      </View>
      <View style={{flex:0.1}}>
        <Box style={{flex:1}}/>
        <Box style={{backgroundColor: 'yellow'}}/>
        <Box/>
        <Box style={{flex:1, backgroundColor: 'yellow'}}/>
      </View>
    </View>
  )
}

const styles = StyleSheet.create({
  container: {
    flex:1,
    flexDirection:'row',
    backgroundColor: colors[1],
  },
});

फेसबुक के फ्लेक्सबॉक्स कार्यान्वयन के बारे में अधिक जानकारी यहाँ है ।