Saya memiliki wadah fleksibel seperti di bawah ini:

<div class="parent">
    <div class="child">1</div>
    <div class="child">2</div>
    <div class="child">3</div>
    <div class="child">4</div>
    .
    .
    .
    <div class="child">n</div>
</div>

Nomor child bervariasi setiap saat. Saya perlu second child untuk selalu menjadi yang terakhir di perangkat seluler.

Saya sadar order: -1 dapat digunakan untuk menempatkannya di tempat pertama setiap saat. Tapi saya tertarik untuk mengetahui apakah ada yang bisa saya lakukan untuk memesannya di posisi terakhir setiap saat.

0
Veey 17 Juni 2020, 08:59

1 menjawab

Jawaban Terbaik

Biasanya elemen diletakkan dalam urutan kemunculannya di markup. Namun Anda dapat menentukan pemesanan implisit menggunakan properti order di css. Ini akan menempatkan elemen sesuai dengan urutannya. Jika dua elemen memiliki nilai yang sama untuk properti pesanan ini, mereka akan tetap ditata mengikuti markup asli. Di satu sisi Anda dapat melihatnya sebagai bentuk pengelompokan: pertama yang dengan urutan 0, kemudian dengan urutan 1, .... (menetapkan nilai negatif untuk pesanan tentu saja akan menempatkan mereka sebelum 0 group; begitulah cara kerja -1 trik untuk menempatkan elemen terlebih dahulu)

Anda dapat menggunakan ini untuk menyelesaikan masalah Anda hanya dengan menyetel order dari anak kedua ke 1, semua elemen lain akan memiliki nilai default 0 jadi ditempatkan sebelumnya.

.child:nth-child(2) {
  order: 1;
}
2
Stephane Vanraes 17 Juni 2020, 06:32