Flexbox float right

Question

私は、一般的な使用例のFlexboxレイアウトのベストプラクティスに関するソリューションを探しています。例では

、私は右にフロートするスコア番号を作るためにフレキシボックスを使用します。私は使用を考えました：

position: absolute, 
right: 0, 

しかし、問題は、私たちは外側のボックスとの中央揃えを使用することができないということです。

私は考えることができるもう一つの方法は、画像と名前の部分をラップする別のフレックスボックスを作ることです、そして、これは私が何を疑問に思う非常に一般的なUIパラダイムのように思える

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

を使用するように、外側フレックスボックスを作成ベストプラクティスはです。どうもありがとうございました！

Answer 1

共通フレキシボックスからの質問に答えるために、この素​​晴らしいガイドを使用してください：https://css-tricks.com/snippets/css/a-guide-to-flexbox

擬似コード：これは、それゆえ押し、すべての利用可能なスペースを占有Textと隣同士に3つの要素を、レンダリング

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

右はScoreNumberです。

Answer 2

これは、あなたが

.parent { 
 
    display: flex; 
 
} 
 

 
.child2 { 
 
    margin-left: auto; 
 
}

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