Flexbox float right

Question

Я ищу решения по наилучшей практике компоновки Flexbox для общего использования.

В примере, я хочу использовать 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>