217

I have a

<div class="parent">
    <div class="child" style="float:right"> Ignore parent? </div>
    <div> another child </div>
</div>

The parent has

.parent {
    display: flex;
}

For my first child, I want to simply float the item to the right.

And my other divs to follow the flex rule set by the parent.

Is this something possible?

If not, how do I do a float: right under flex?

Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
Zhen Liu
  • 7,550
  • 14
  • 53
  • 96

4 Answers4

414

You can't use float inside flex container and the reason is that float property does not apply to flex-level boxes as you can see here Fiddle.

So if you want to position child element to right of parent element you can use margin-left: auto but now child element will also push other div to the right as you can see here Fiddle.

What you can do now is change order of elements and set order: 2 on child element so it doesn't affect second div

.parent {
  display: flex;
}
.child {
  margin-left: auto;
  order: 2;
}
<div class="parent">
  <div class="child">Ignore parent?</div>
  <div>another child</div>
</div>
Nenad Vracar
  • 118,580
  • 15
  • 151
  • 176
  • 1
    Thanks i can take a look at the first solution. I don't want to use display:absolute as my other children shouldn't be covered under the first child. – Zhen Liu Mar 23 '16 at 15:57
  • 6
    "*floats do not intrude into the flex container*". That's true, but it is not the reason. The reason is that `float` property does not apply to flex-level boxes. – Oriol Mar 23 '16 at 17:25
  • 1
    This works, thank you! Why does `justify-self: end;` (or something similar) not work for the child? This seems like a not-so-flexy solution to a flexbox problem. – Brady Dowling Jan 23 '18 at 18:45
  • 2
    @BradyDowling I know this is a late reply, but justify-self end requires the display to be set to a grid. Flexboxes will ignore justify-self:end. See here: https://developer.mozilla.org/en-US/docs/Web/CSS/justify-self – Paul Oct 31 '19 at 15:49
  • 1
    another child
    Ignore parent?
    U can swap the two div and without the order 2 it works too     – yeeen Oct 15 '20 at 10:08
47

You don't need floats. In fact, they're useless because floats are ignored in flexbox.

You also don't need CSS positioning.

There are several flex methods available. auto margins have been mentioned in another answer.

Here are two other options:

  • Use justify-content: space-between and the order property.
  • Use justify-content: space-between and reverse the order of the divs.

.parent {
    display: flex;
    justify-content: space-between;
}

.parent:first-of-type > div:last-child { order: -1; }

p { background-color: #ddd;}
<p>Method 1: Use <code>justify-content: space-between</code> and <code>order-1</code></p>

<div class="parent">
    <div class="child" style="float:right"> Ignore parent? </div>
    <div>another child </div>
</div>

<hr>

<p>Method 2: Use <code>justify-content: space-between</code> and reverse the order of 
             divs in the mark-up</p>

<div class="parent">
    <div>another child </div>
    <div class="child" style="float:right"> Ignore parent? </div>
</div>
Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
23

Use justify-content: flex-end; in parent:

display: flex;
width: 100%;
flex-wrap: wrap;
justify-content: flex-end;

more info

Emir Mamashov
  • 1,108
  • 9
  • 14
2
display: flex;
flex-wrap: wrap;
justify-content: space-between;
Hargbholarhan Mujeeb
  • 37
  • 3
  • 2
    Please read [answer] and [edit] your answer to contain an explanation as to why this code would actually solve the problem at hand. Always remember that you're not only solving the problem, but are also educating the OP and any future readers of this post – chrslg Jan 11 '23 at 00:49
  • If you follow the question from the beginning, you should understand the OP is trying to make flex object be at left and right side. Is there need for me to be explaining 'justify-content: space between' ? – Hargbholarhan Mujeeb Jan 12 '23 at 10:22
  • Well, yes, there is. Especially when you answer very old questions. There is already an answer using `space-between`. Since you add another one, you are supposed to explain why your way of doing is different, and even better, than the already existing upvoted answers. The fact that you, now, tell me that `space-between` is the core of your answer reinforce my wondering "how this is different than other answers using `space-between`". – chrslg Jan 12 '23 at 12:56
  • Just to clarify, I am not tracking "code-only" answers for fun. I don't really care for that question to be frank. But your answer was automatically flagged "low quality" by the system (and I suppose by some users, but I don't know exactly what trigger an answer to be in the "low quality" list). I am required, when reviewing the "low quality" queue to take action. Either edit the answer myself (which I am unable. I am not a pro of CSS, but I do use it from times to times, and yet, I am unable to explain the difference between your answer and others. One extra proof that this ... – chrslg Jan 12 '23 at 12:59
  • ... explanation has to come from you, and is not purely redundant), or to add that canned comment about necessity of an explanation (or to recommend deletion, which is not fitted here, since your answer is obviously an honest attempt to bring clarity... but explanation in addition to code are required) – chrslg Jan 12 '23 at 13:01
  • 1
    Oh, I'm sorry, I tried space-around and it works fine by given spaces between each item, but what I actually want was to have the last item at the right side, so the items can occupy the whole width, so I just feels like putting it here for someone might be looking for something similar. Not a big fan of answering questions here. I will try and be putting explanation next time, thanks – Hargbholarhan Mujeeb Jan 19 '23 at 21:04