Flexbox float right

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

В этом примере я хочу использовать Flexbox, чтобы число баллов было плавающим вправо. Я думал об использовании:

position: absolute,
right: 0,

Но тогда проблема в том, что мы не можем использовать выравнивание по центру с внешним полем.

Еще один способ, который я могу придумать, - сделать еще одну гибкую коробку для обертывания изображения и имени, а затем создать внешнюю флешку, чтобы использовать

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

Это похоже на очень распространенную парадигму интерфейса. Интересно, что такое лучшая практика. Большое вам спасибо!

Ответ 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 направо.

Ответ 2

Это поможет вам

.parent {
  display: flex;
}

.child2 {
  margin-left: auto;
}

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