Создание гибкого элемента поплавка право

Question

У меня есть

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

Answer 1

Вы не можете использовать 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>

Answer 2

Вам не нужно поплавки. На самом деле они бесполезны, потому что floats are ignored in flexbox.

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

Существует несколько способов гибки. auto margins были упомянуты в another answer.

Вот два других варианта:

• Использование justify-content: space-between и order свойство.
• Используйте justify-content: space-between и измените порядок на 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>