Flexbox float right
Use this awesome guide to answer common Flexbox questions: https://css-tricks.com/snippets/css/a-guide-to-flexbox
Pseudocode:
<View style={{flexDirection: 'row', alignItems: 'center'}}>
<ProfilePicture />
<Text style={{flex: 1}}>{username}</Text>
<ScoreNumber />
</View>
This renders the 3 elements next to each other, with the Text
occupying all the available space, therefore pushing the ScoreNumber
to the right.
This will help you
.parent {
display: flex;
}
.child2 {
margin-left: auto;
}
<div class="parent">
<div class="child1">left</div>
<div class="child2">right</div>
</div>
Use justify-content: space-between
it will push elements to the sides:
.flex {
display: flex;
justify-content: space-between;
}
.flex-grow {
flex-grow: 1;
}
.one {
border: 1px solid black;
width: 20px; height: 20px;
}
.two {
border: 1px solid black;
width: 20px; height: 20px;
}
.three {
border: 1px solid black;
width: 20px; height: 20px;
}
Growing middle element
<div class="flex">
<div class="one"></div><div class="two flex-grow"></div><div class="three"></div>
</div>
Without growing element
<div class="flex">
<div class="one"></div><div class="two"></div><div class="three"></div>
</div>
Without middle element
<div class="flex">
<div class="one"></div><div class="three"></div>
</div>
Refer to this amazing tutorial to easily understand how flex box behaves: https://css-tricks.com/snippets/css/a-guide-to-flexbox/