Flexbox float right

Question

I am looking for solutions on Flexbox layout best practice for a common use case.

In the example, I want to use Flexbox to make the score number to be float to the right. I thought of using:

position: absolute;
right: 0;

But then the problem is that we can't use the center align with the outer box.

Another way I can think of is to make another flex box to wrap the image and name part, then create an outer flex box to use

justifyContent: space-between;

to make the expected layout.

Consider flex `auto` margins: http://stackoverflow.com/a/33856609/3597276 — Michael Benjamin, Apr 13 '16 at 14:24
I found `position: absolute; right 0;` still very useful when "floating" something to the right that should span over multiple other flex-item "rows" that should not be affected by the item pinned to the right. Using 'float: right;' in chrome somehow affects other flex-contents that follow afterwards (they won't take up the space occupied by the right-floated content). They need to be converted to `display: block` to take up the space correctly, but I'm more happy using absolute positioning in that particular case. — icyerasor, Jul 13 '21 at 16:27

score 103 · Answer 1 · edited Jan 05 '18 at 14:44

103

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>

edited Jan 05 '18 at 14:44

Paweł Gościcki

9,066
5
70
81

answered Apr 13 '16 at 18:30

pradeep1991singh

8,185
4
21
31

1

Simple and elegant. This should be the accepted answer. – Rasmus Jan 25 '21 at 15:26
1

Will this solution work with 3 children? Lets say 2 on right on 1 on left. – John Nov 03 '21 at 17:18
@John it does work with 3 children – Yevgeniy Jan 30 '22 at 17:51
"For Bootstrap-5 we have to use ms-auto instead of ml-auto", source: https://stackoverflow.com/a/65562241/1956540 – BatteryAcid Feb 02 '22 at 18:23

score 18 · Accepted Answer · edited Jul 13 '21 at 16:20

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/

This answer works a lot better than @pradeep1991singh answer. `margin-left:auto` will cause unexpected results in a lot of places. — Seth B, Mar 02 '21 at 00:22

Martin Konicek · Answer 3 · 2017-02-09T20:25:10.237

10

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.

edited Feb 09 '17 at 20:25

answered Apr 13 '16 at 14:17

Martin Konicek

39,126
20
90
98

1

What is the shorthand `flex: 1` mean? Is this the same as `flex-grow: 1`? – styfle May 11 '17 at 13:18
A bit late but yes, it's the shorthand for `flex-grow: 1`. It can be extended as `flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]`. – Daniel B Jan 29 '18 at 13:52
2

it doesn't work if you remove middle element. `justify-content: space-between` should be used to achieve that instead. – BitOfUniverse Apr 02 '18 at 23:20

Flexbox float right

3 Answers3