182

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
  • 307,417
  • 93
  • 525
  • 644
Zhen Liu
  • 6,616
  • 10
  • 51
  • 82

3 Answers3

339

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
  • 111,264
  • 15
  • 131
  • 153
  • 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
  • 4
    "*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
  • 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
  • 1
    @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
  • 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
  • thank you for this! – tiadotdev Feb 04 '22 at 17:52
37

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
  • 307,417
  • 93
  • 525
  • 644
12

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

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

more info

Emir Mamashov
  • 924
  • 8
  • 13