Bagaimanakah Saya Boleh Menjajarkan Kanan Satu Item Flexbox Sementara Yang Lain Kekal Menjajarkan Kiri?

Menjajarkan Item Flexbox: Pilihan Jajaran Kanan

Soalan:

Dalam konteks flexbox, adakah mungkin untuk selaraskan dua item ke kiri dan satu item ke kanan? Untuk perwakilan visual, rujuk pautan JSFiddle yang disediakan.

Jawapan:

Untuk mencapai penjajaran kanan bagi satu anak lentur, tetapkan margin-kiri: auto;.

Mengikut spesifikasi flex:

Auto margin pada paksi utama boleh digunakan untuk memisahkan item fleksibel kepada "kumpulan" yang berbeza. Ini membolehkan penciptaan corak UI seperti bar tindakan dengan beberapa item dijajarkan ke kiri dan yang lain ke kanan.

Oleh itu, CSS berikut akan menjajarkan elemen div terakhir dalam contoh yang disediakan ke kanan:

.wrap div:last-child {
  margin-left: auto;
}

Dengan menggabungkan teknik ini dengan gaya flexbox sedia ada anda, anda boleh mencapai reka letak yang diingini tanpa memerlukan berbilang blok kod.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Menjajarkan Kanan Satu Item Flexbox Sementara Yang Lain Kekal Menjajarkan Kiri?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!