Робимо гнучкий предмет плаваючим правильно

Question 1

Я маю

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

У батьків є

.parent {
    display: flex;
}

Для своєї першої дитини я хочу просто перемістити предмет праворуч.

І інші мої div, щоб слідувати правилу flex, встановленому батьком.

Це щось можливо?

Якщо ні, як мені зробити float: rightфлекс?

Question 2

Ви не можете використовувати 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>

Розгорніть фрагмент

Question 3

Вам не потрібні поплавки. Насправді вони марні, оскільки поплавці у 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>

Розгорніть фрагмент