Bagaimana untuk Menjajarkan Elemen Tunggal ke Kanan Menggunakan Flexbox?

Menjajarkan Satu Item Betul dengan Flexbox

Untuk menangani persoalan menjajarkan satu elemen betul-betul dalam susun atur flexbox, kod HTML dan CSS disediakan mempamerkan persediaan kotak flex asas yang meletakkan dua item di kiri dan satu item di kanan dalam a bekas.

HTML

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

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

CSS

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

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

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

.result div {
  float: left;
}

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

Pendekatan Flexbox

Untuk menjajarkan satu elemen anak ke kanan, tetapkannya dengan jidar-kiri: auto;. Ini memanfaatkan sifat margin auto dalam paksi utama, yang berguna untuk mengasingkan item flex kepada kumpulan yang berbeza.

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

Fiddle dikemas kini

JSFiddle yang dikemas kini menunjukkan perkara ini pendekatan dengan berkesan:

[Dikemas kini Fiddle](https://jsfiddle.net/vhem8scs/)

Dalam CSS yang dikemas kini, jidar-kiri: auto; sifat digunakan pada elemen div terakhir dalam bekas .wrap, menyebabkan ia dijajarkan ke kanan.

Atas ialah kandungan terperinci Bagaimana untuk Menjajarkan Elemen Tunggal ke Kanan Menggunakan Flexbox?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!