Membuat item fleksibel mengambang dengan benar

Saya punya

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

Orang tua memiliki

.parent {
    display: flex;
}

Untuk anak pertama saya, saya hanya ingin mengapungkan item ke kanan.

Dan div saya yang lain mengikuti aturan flex yang ditetapkan oleh orang tua.

Apakah ini mungkin?

Jika tidak, bagaimana cara melakukan float: rightunder flex?

Anda tidak dapat menggunakan floatdi dalam wadah fleksibel dan alasannya adalah bahwa properti float tidak berlaku untuk kotak tingkat-fleksibel seperti yang Anda lihat di sini Fiddle.

Jadi jika Anda ingin memposisikan childelemen di sebelah kanan parentelemen Anda dapat menggunakan margin-left: autotetapi sekarang childelemen juga akan mendorong yang lain divke kanan seperti yang Anda lihat di sini Fiddle.

Apa yang dapat Anda lakukan sekarang adalah perubahan urutan elemen dan set order: 2pada childelemen sehingga tidak mempengaruhi div kedua

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

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

Anda tidak membutuhkan pelampung. Faktanya, mereka tidak berguna karena float diabaikan di flexbox .

Anda juga tidak membutuhkan pemosisian CSS.

Ada beberapa metode fleksibel yang tersedia. automargin telah disebutkan dalam jawaban lain .

Berikut dua opsi lainnya:

• Gunakan justify-content: space-betweendanorder properti.
• Menggunakan justify-content: space-betweendan membalik urutan 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>