Membuat item fleksibel mengambang dengan benar

114

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?

html css flexbox Zhen Liu
sumber

Jawaban:

213

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>
Luaskan cuplikan

Nenad Vracar
sumber
Terima kasih, saya dapat melihat solusi pertama. Saya tidak ingin menggunakan display: absolute karena anak saya yang lain tidak boleh termasuk dalam child first.
Zhen Liu
4
" pelampung tidak mengganggu wadah fleksibel ". Itu benar, tapi bukan itu alasannya. Alasannya adalah bahwa floatproperti tidak berlaku untuk kotak level-fleksibel.
Oriol
Ini berhasil, terima kasih! Mengapa justify-self: end;(atau yang serupa) tidak berhasil untuk anak tersebut? Ini sepertinya solusi yang tidak terlalu mudah untuk masalah flexbox.
Brady Dowling
1
@BradyDowling Saya tahu ini adalah balasan yang terlambat, tetapi justify-self end memerlukan tampilan untuk disetel ke kisi. Flexboxes akan mengabaikan justify-self: end. Lihat di sini: developer.mozilla.org/en-US/docs/Web/CSS/justify-self
Paul
<div> anak lain </div> <div class = "child"> Abaikan induk? </div> U dapat menukar dua div dan tanpa urutan 2 itu juga berfungsi
yeeen
26

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>
Luaskan cuplikan

Michael Benjamin
sumber