Bagaimana untuk Menjajarkan Kanan Satu Item dalam Bekas Flexbox?

<h2>Cara Menjajarkan Satu Item Betul dengan Flexbox</h2>

Mencapai penjajaran item yang tepat ialah cabaran biasa dalam reka bentuk web. Flexbox menawarkan penyelesaian yang berkuasa, tetapi menjajarkan item dalam konfigurasi tertentu boleh menjadi rumit. Artikel ini meneroka senario biasa di mana satu item perlu diselaraskan betul-betul di tengah-tengah item fleksibel yang lain.

<h3>Pernyataan Masalah</h3>

Pertimbangkan bekas fleksibel dengan tiga item kanak-kanak disusun sebelah menyebelah. Hasil yang diingini ialah dua item pertama dijajarkan ke kiri dan item ketiga dijajarkan ke kanan. HTML dan CSS berikut mewakili persediaan awal:

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

.wrap {
  display: flex;
  justify-content: space-between;
}

<h3>Penyelesaian: Margin-Left Auto</h3>

Flexbox menyediakan penyelesaian mudah untuk masalah ini : menetapkan margin-kiri: auto pada item anak terakhir. Daripada spesifikasi flex:

<blockquote>Satu penggunaan margin auto dalam paksi utama adalah untuk memisahkan item flex kepada "kumpulan" yang berbeza. Ini ditunjukkan oleh corak UI biasa bagi satu bar tindakan, beberapa daripadanya dijajar di sebelah kiri dan yang lain dijajar di sebelah kanan.</blockquote>

Memohon margin-kiri: auto ke yang terakhir item anak dalam contoh kami menghasilkan penjajaran yang diingini:

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

<h3>Dikemas kini Contoh</h3>

Dengan CSS yang disemak ini, coretan kod HTML dan CSS yang terhasil menghasilkan penjajaran yang diingini, dengan dua item pertama dijajarkan ke kiri dan item ketiga dijajarkan betul-betul dalam bekas fleksibel:

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

.wrap {
  display: flex;
  justify-content: space-between;
}
.wrap div:last-child {
  margin-left: auto;
}

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