Bagaimana Saya Menjajarkan Item Flexbox?

Bagaimanakah saya boleh menjajarkan satu item dengan betul dengan flexbox?

Dalam flexbox, anda boleh menetapkan margin-kiri: auto; harta untuk menjajarkan satu item ke kanan.

Spesifikasi flexbox menyatakan:

"Satu penggunaan margin auto dalam paksi utama adalah untuk memisahkan item flex
ke dalam 'kumpulan' yang berbeza. Contoh berikut menunjukkan cara menggunakan ini untuk
menghasilkan semula corak UI biasa - satu bar tindakan dengan beberapa
dijajarkan di sebelah kiri dan yang lain dijajarkan di sebelah kanan."

Berikut ialah coretan kod yang dikemas kini:

.wrap {
  display: flex;
  background: #ccc;
  width: 100%;
  justify-content: space-between;
}

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

.result {
  background: #ccc;
  margin-top: 20px;
}

.result:after {
  content: '';
  display: table;
  clear: both;
}

.result div {
  float: left;
}

.result div:last-child {
  float: right;
}

Rebab yang dikemas kini di bawah menunjukkan penjajaran:

[demo rebab](https: //jsfiddle.net/vhem8scs/)

Atas ialah kandungan terperinci Bagaimana Saya Menjajarkan Item Flexbox?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!