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/

Tags:

Css

Flexbox

React Native

Recent Posts