Bagaimana untuk Menjajarkan Item Flexbox Dengan Hanya `margin-left: auto`?

Cara Menjajarkan Satu Item Betul dengan Flexbox

Masalah:

Dalam biola yang disediakan, selaraskan item ketiga ke kanan menggunakan flexbox kelihatan mencabar. Kod awal menjajarkan ketiga-tiga item ke kiri, manakala terapung digunakan untuk menjajarkan item terakhir ke kanan dalam hasil yang diingini.

Penyelesaian:

Menggunakan sifat "margin-left: auto" pada anak ketiga bekas flex dengan mudah menjajarkannya ke kanan. Teknik ini memanfaatkan ciri margin auto dalam flexbox, yang membolehkan pengedaran item flex ke dalam kumpulan yang berbeza. Dengan menyatakan margin-kiri: auto pada anak flex terakhir, ia melaraskan kedudukannya secara automatik untuk menjajarkannya ke sebelah kanan bekas.

Kod Kemas Kini:

Coretan CSS yang dikemas kini berikut menjajarkan item ketiga ke kanan menggunakan flexbox:

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

Rebab yang dikemas kini menunjukkan penjajaran elemen yang berjaya menggunakan flexbox:

<div class="wrap">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
</div>

.wrap {
  display: flex;
  background: #ccc;
  width: 100%;
  justify-content: space-between;
}
.wrap div:last-child {
  margin-left: auto;
}

Atas ialah kandungan terperinci Bagaimana untuk Menjajarkan Item Flexbox Dengan Hanya `margin-left: auto`?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!