Making a flex item float right

Problem

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;
}

I just want to float the thing to the right for my first child.

And I want my additional divs to follow the parent’s flex rule.

Is this something that can be done?

If not, how do I accomplish a float if I don’t have flex?

Asked by Zhen Liu

Solution #1

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.

If you use margin-left: auto to position a child element to the right of a parent element, the child element will also push additional divs to the right, as shown in Fiddle.

You can now rearrange the elements and set order: 2 on the child element to prevent the second div from being affected.

Answered by Nenad Vracar

Solution #2

Floats aren’t required. In reality, floats are disregarded in flexbox, therefore they’re meaningless.

CSS positioning is also not required.

There are a variety of flex ways to choose from. In another answer, auto margins were addressed.

Here are two further possibilities:

Answered by Michael Benjamin

Solution #3

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

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

more info

Answered by Emir Mamashov

Post is based on https://stackoverflow.com/questions/36182635/making-a-flex-item-float-right