प्रतिक्रिया मूल स्टाइलशीट: {flex: 1} क्या करता है?

Question

लेआउट के लिए देशी मूल फ्लेक्सबॉक्स का उपयोग करता है।

var styles = StyleSheet.create({ 
    container: { 
    flex: 1, 
    flexDirection: 'row' 
    } 
}); 

मैं flex: 1 भाग के बारे में उत्सुक हूँ: उदाहरण मैंने देखा है के सभी में, वे कुछ इस तरह से करते हैं। क्रिस कोयियर की परिभाषा के आधार पर यहां https://css-tricks.com/snippets/css/a-guide-to-flexbox/, flex: 1flex-grow: 1 जैसा ही होना चाहिए, लेकिन मेरे लिए ऐसा लगता है कि प्रतिक्रिया मूल में flex: 1 सीएसएस में display: flex के बराबर है।

http://codepen.io/johnnyo/pen/BoKbpb

यह जब तक हम सीएसएस में display: flex का उपयोग नहीं है जब तक flexbox काम करने के लिए शुरू होता है:

यहाँ एक CodePen यह दर्शाता है कि flex: 1 तरह से मूल निवासी उदाहरण यह सीएसएस में कुछ भी नहीं है का उपयोग प्रतिक्रिया है कि

http://codepen.io/johnnyo/pen/epZXgz

तो यह मतलब है में flex: 1 प्रतिक्रिया है कि मूल निवासी सी में display: flex के बराबर है एस एस?

Answer 1

सीएसएस फ्लेक्सबॉक्स और फेसबुक द्वारा लागू एक के बीच काफी अंतर है। बहुत सी चीजें आम हैं लेकिन डिफ़ॉल्ट बहुत अलग हैं। विशेष रूप से:

Everything is display: flex by default. All the behaviors of block and inline-block can be expressed in term of flex but not the opposite. 

फ्लेक्स: इसका मतलब है कि दूसरा तत्व 3 बार पहले से भी बड़ा होना चाहिए विशेषता केवल जब एक ही स्तर पर अलग-अलग फ्लेक्स मूल्यों (:: 1, फ्लेक्स 3 फ्लेक्स) के साथ कुछ घटक हैं प्रयोग किया जाता है एक। फ्लेक्स विशेषता केवल एक ही समर्थित है (कोई वृद्धि/सिकुड़ समर्थन नहीं)।

और जानकारी: https://github.com/facebook/css-layout

Answer 2

Jarek Potiuk का जवाब करने के लिए एक टिप्पणी: 'फ्लेक्स: 1' प्रतिक्रिया देशी समान करने के लिए फ्लेक्स-बढ़ने व्यवहार में कुछ करना है। भले ही यह फ्लेक्स के साथ एकमात्र है: परिभाषित।

फ्लेक्सडिरेक्शन, alignItems, justify सामग्री जैसे स्टाइल तत्व तत्वों के बच्चों की स्टाइल को परिभाषित करते हैं। सीएसएस डिस्प्ले के समान: फ्लेक्स, जो बच्चों को भी परिभाषित करता है।

इसके विपरीत, फ्लेक्स: x तत्व को स्वयं परिभाषित करता है।

उदा। 'पंक्ति', alignItems: एक कंटेनर घटक flexDirection है अगर 'केंद्र'
और वहाँ 3 बच्चे हैं:

बच्चे 1 चौड़ाई 50

बच्चे 2 फ्लेक्स 1 है (या किसी अन्य नंबर, लेकिन 1 आम बात)

बच्चे 3 है चौड़ाई है 50

फिर बीच घटक ताकि 3 बच्चों को एक साथ माता पिता घटक की पूरी चौड़ाई भर जाएगा 'खिंचाव'।

Answer 3

आप की तरह मैं इस टैग है कि फेसबुक संहिता पर ठीक से दर्ज नहीं किया है को समझने के लिए संघर्ष करना पड़ा, लेकिन मैं अंत में पता चला कि यह दो बातें करता है:

1. कंटेनरों एक flex विशेषता के साथ किसी भी बच्चों पर विचार ऊंचाई के लिए यह निर्धारित करने के उद्देश्य से 0 में से कितना स्थान लेते हैं।
2. flex: X के साथ घटक अन्य घटकों के बाहर रखे जाने के बाद अपने कंटेनर में शेष कोई भी कमरा लेने के लिए विस्तारित हैं। वे इस अतिरिक्त स्थान को उनके एक्स मानों के अनुपात में साझा करते हैं।

पहला आइटम यह है कि flex: 1display: flex जैसा ही प्रभाव हो सकता है। क्योंकि एक दूसरे की 0. ExampleAppContainer पहले पाठ घटक के लिए पर्याप्त जगह आवंटित की ऊंचाई वाला माना जाता है,

<ExampleAppContainer> 
    <Text> 
     I get printed. 
    </Text> 
    <Text style={{flex: 1}}> 
     But I don't :(
    </Text> 
</ExampleAppContainer> 

केवल पहले पाठ घटक मुद्रित हो जाता है, और वहाँ किसी भी नहीं है: निम्नलिखित JSX कोड पर विचार करें विस्तार करने के लिए दूसरे के लिए कमरा।

<ExampleAppContainer style={{flex:1}}> 
    <Text> 
     I get printed. 
    </Text> 
    <Text style={{flex: 1}}> 
     And so do I! 
    </Text> 
</ExampleAppContainer> 

ExampleAppContainer के बाद से flex: 1 है, यह यह कर सकते हैं जितना कमरे को लेने के लिए फैलता है:

अब इस कोड पर विचार करें। यह मानते हुए कि यह आपके ऐप के रिएक्ट हिस्से के लिए मूल घटक है, यह आमतौर पर पूरी फोन स्क्रीन होने जा रहा है। इसके बाद यह पहले पाठ घटक के लिए पर्याप्त स्थान आवंटित करता है, और शेष पाठ को लेने के लिए दूसरे पाठ घटक को विस्तारित करने की अनुमति देता है।

इस फैशन में आपको अक्सर flex: 1 को अपने पिक्चररी के नीचे flex: N कमरे के साथ सही तरीके से विस्तार करने की अनुमति देने के लिए घटक पदानुक्रम को नीचे करने की आवश्यकता होगी।

Answer 4

बहुत सारे ट्यूटोरियल flex: 1 का उपयोग करते हैं, जैसा कि आपने अपने उदाहरण में किया था। मुख्य कारण यह है कि कभी-कभी (सूची स्टाइल डिफ़ॉल्ट रूप से तत्व पर निर्भर करता है, यदि मेरी मेमोरी परोसा जाता है) यदि आप आयाम को परिभाषित नहीं करते हैं तो घटक पूरी स्क्रीन/क्षेत्र नहीं लेगा, जैसे ऊंचाई (उदा। height: '400px')। फ्लेक्स: कमाल है क्योंकि यह विभिन्न आकारों के लिए चीजों को उत्तरदायी रखता है।

लेकिन मुझे ध्यान रखना चाहिए कि के साथ किसी भी घटक के लिए कोई भाई बहन नहीं है, फ्लेक्स का मान पूरी तरह से मनमाना है। पूर्व। अपने शीर्ष-स्तरीय घटक के लिए, आप flex: 43254315 कह सकते हैं और यह flex: 1 जैसा ही है। इसका मतलब है "पूरी जगह ले लो" (जो भी "पूरा" हो सकता है)।

दूसरी तरफ, यदि आपके पास भाई घटक हैं, तो फ्लेक्स मान बहुत मायने रखता है। उदाहरण के लिए, यदि एक घटक flex: 2 है और दूसरा flex: 3 है, तो पहले स्क्रीन के 2/5 लेते हैं और दूसरा स्क्रीन के 3/5 लेता है।

संक्षेप में: अपनी शैली के आधार पर इसे flex: 1 कैसा लग सकता है display: flex रूप में ही है, लेकिन यह केवल इसलिए है क्योंकि जिस तरह से आप अपने उदाहरण में प्रयोग कर रहे हैं की है। यदि आप इसे कुछ भाई बहन देते हैं तो आप इसे बहुत अलग तरीके से देखेंगे।