फ्लेक्सबॉक्स फ्लोट सही

Question

मैं फ्लेक्सबॉक्स लेआउट पर एक सामान्य उपयोग मामले के लिए सर्वोत्तम अभ्यास पर समाधान ढूंढ रहा हूं।

उदाहरण में, मैं flexbox उपयोग करने के लिए सही करने के लिए नाव होने के लिए स्कोर संख्या बनाना चाहते हैं। मैंने इसका उपयोग करने के बारे में सोचा:

position: absolute, 
right: 0, 

लेकिन फिर समस्या यह है कि हम बाहरी बॉक्स के साथ केंद्र संरेखण का उपयोग नहीं कर सकते हैं।

एक और तरीका है मैं के बारे में सोच सकते हैं छवि और नाम हिस्सा रैप करने के लिए एक और फ्लेक्स बॉक्स बनाने के लिए है, तो

justifyContent: 'space-between' 
to make the expected layout. 

उपयोग करने के लिए यह एक बहुत ही आम यूआई प्रतिमान मुझे आश्चर्य है कि क्या की तरह लगता है एक बाहरी फ्लेक्स बॉक्स बनाने सबसे अच्छा अभ्यास है। आपका बहुत बहुत धन्यवाद!

Answer 1

आम flexbox सवालों के जवाब देने इस भयानक मार्गदर्शिका का उपयोग करें: https://css-tricks.com/snippets/css/a-guide-to-flexbox

स्यूडोकोड:

<View style={{flexDirection: 'row', alignItems: 'center'}}> 
    <ProfilePicture /> 
    <Text style={{flex: 1}}>{username}</Text> 
    <ScoreNumber /> 
</View> 

यह सभी उपलब्ध अंतरिक्ष कब्जे अगले एक दूसरे के लिए 3 तत्वों, Text साथ प्रस्तुत हुई है, इसलिए जोर दे दाईं ओर ScoreNumber।

Answer 2

यह तुम्हारी मदद करेगा

.parent { 
 
    display: flex; 
 
} 
 

 
.child2 { 
 
    margin-left: auto; 
 
}

<div class="parent"> 
 
    <div class="child1">left</div> 
 
    <div class="child2">right</div> 
 
</div>