Создание гибкого элемента float right

У меня есть

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

Родитель имеет

.parent {
    display: flex;
}

Для моего первого ребенка я хочу просто поместить элемент вправо.

И мои другие divs следуют правилам flex, установленным родителем.

Возможно ли это?

Если нет, как мне сделать float: right в flex?

Ответ 1

Вы не можете использовать float внутри контейнера flex, и причина в том, что свойство float не относится к ящикам уровня flex, как вы можете видеть здесь Fiddle.

Итак, если вы хотите поместить элемент child вправо от элемента parent, вы можете использовать margin-left: auto, но теперь элемент child также будет перемещать другие div вправо, как вы можете видеть здесь Fiddle.

Теперь вы можете изменить порядок элементов и установить order: 2 на элемент child, чтобы он не влиял на второй div

.parent {
  display: flex;
}
.child {
  margin-left: auto;
  order: 2;
}

<div class="parent">
  <div class="child">Ignore parent?</div>
  <div>another child</div>
</div>

Ответ 2

Вам не нужны поплавки. Фактически, они бесполезны, потому что float игнорируются в flexbox.

Вам также не нужно позиционирование CSS.

Существует несколько способов гибки. auto поля указаны в другом ответе.

Вот еще два варианта:

Используйте justify-content: space-between и свойство order.
Используйте justify-content: space-between и измените порядок разделов.

.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>