Делаем гибкий элемент плавным

у меня есть

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

У родителя есть

.parent {
    display: flex;
}

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

И другие мои div, чтобы следовать правилу гибкости, установленному родителем.

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

Если нет, как мне сделать float: rightнедогружение?

Вы не можете использовать floatвнутренний гибкий контейнер, и причина в том, что свойство float не применяется к блокам гибкого уровня, как вы можете видеть здесь 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>

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

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

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

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

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

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